css实现页面底部置底（转载）

页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

1、将内容部分的底部外边距设为负数

这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。

<body><div class="wrapper">content<div class="push"></div></div><footer class="footer"></footer>
</body>

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

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

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。

2、将页脚的顶部外边距设为负数

既然能在容器上使用负的margin bottom，那能否使用负margin top吗？当然可以。

给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。

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

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

不过这种方法和上一种一样，都需要额外添加不必要的html元素。

3、使用calc()设置内容高度

有一种方法不需要任何多余元素——使用CSS3新增的计算函数calc()

这样元素间就不会有重叠发生，也不需要控制内外边距了～

<body><div class="content">content</div><footer class="footer"></footer>
</body>
.content {min-height: calc(100vh - 70px);
}
.footer {height: 50px;
}

可能你会疑惑内容高度calc()中为什么减去70px，而不是footer的高度50px，因为假设俩元素有20px的间距，所以70px=50px+20px

不过，你不必在意这些~

4、使用flexbox弹性盒布局（亲测有效）

以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮~（≧∇≦）

<body><div class="content">content</div><footer class="footer"></footer>
</body>

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

你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一：

flex ： 1 使内容（如：.content）高度可以自由伸缩
margin-top： auto

5、使用Grid网格布局

grid比flexbox还要新很多，并且更佳很简洁

<body><div class="content">content</div><footer class="footer"></footer>
</body>

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

遗憾的是，网格布局（Grid layout）目前仅支持Chrome Canary和Firefox Developer Edition版本。

总结

其实页脚置底的布局随处可见，很多人也和我一样觉得比较简单，但可能只知其然罢了，偶然看到CSS-TRICKS上介绍页脚置底的文章觉得不错，遂译之。

（未授权，如侵删）

css实现页面底部置底（转载）相关推荐

[css] 移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？
[css] 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办? flex-wrap nowrap, 一般flex默认就是nowrap white-space:nowrap ...
css修饰页面怎么制作,【转载】CSS修饰图片
有人翻译了<css decorative gallery>这篇文章,这写也是我们前端开发的时候经常用到的一些技巧.感谢翻译者,感谢webdesignerwall 这篇文章主要介绍了用简单的 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网 ...
web实现置顶、置底功能、聊天页面、锚点、滚动条、vue、scrollTop、scrollIntoView、scrollHeight
目录前言 1.代码实现 3.scrollTop实现置顶置底(方式一) 4.scrollIntoView实现置顶置底(方式二) 5.总结前言在项目中遇到聊天功能,功能涉及置顶和置底知识,由此记录一 ...
微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样
重点看标红部分,其他代码只是写的上下逻辑,可忽略 wxml: <view style="position: relative;width: 100%;height: 100%;&quo ...
footer.php置底,CSS五种方式实现Footer置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部: 但如果网页内容不够长,置底的页脚就 ...
DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
CSS五种方式实现 Footer 置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

css实现页面底部置底（转载）

css实现页面底部置底（转载）相关推荐

最新文章

热门文章