网页footer始终至底

最新推荐文章于 2024-08-23 09:58:09 发布

转载最新推荐文章于 2024-08-23 09:58:09 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/congfeicong/p/7594959.html

文章标签：

#移动开发

1、网页一般由头部，内容，尾部组成。其中尾部一般在底部。

2、对于页面内容足够多时，尾部会一直在最底部。当页面内容较少时，尾部便不会再底部了。

方法一：

将内容部分的margin-bottom设置成负数（负数值为footer的值）

a:这个方法需要容器里有额外的占位元素（div.push）。

b:div.wrapper的margin-bottom需要和div.footer的-height值一样，注意是负height。

html:

<div class="wrapper">
    <!-- content -->
    <div class="push"></div>
</div>
<div class="footer">footer</div>

css:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}

方法二：

将页脚的margin-top设置为负值（负数值为footer的值）

a:给内容外增加父元素，并让内容部分的padding-bottom与页脚的height相等。

html：

<div class="content">
  <div class="content-inside">
    <!-- content -->
  </div>
</div>
<div class="footer">footer</div>

css:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

方法三：

使用calc设置内容高度

a:这里假设div.content和div.footer之间有20px的间距，所以70px=50px+20px

b:在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

html：

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>

css:

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

方法四：（不固定底部高度，不兼容ie低版本）

使用flexbox弹性盒布局

html:

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>

css:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

方法五：（不固定底部高度，不兼容ie低版本）

使用grid网格布局

html:

<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>

css:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}