一般来说，页面中的body是由页面内容撑开的。但有时候我们会有这样奇怪的需求，当页面内容不满一屏时，却要求有一个撑满一屏的背景色。
通常的解决方案是用最小高度解决，然而如果直接子元素有下margin，就会在部分手机上触发BFC，解决这类问题我一般会在他的父元素上直接overflow:hidden，但是此时此刻，这种方法行不通，除非你能确定你的页面永远不会超出一屏。
其实鱼与熊掌是可以兼得的，换一种思路，我们伟大的伪元素登场啦。还记得那一天，我问我们老大，你写代码的时候为什么老喜欢用伪元素，只见他无奈的瞥了我一眼，伪元素可以在不改变HTML结构的情况下实现某些css效果，这对项目后期维护还是很有帮助滴。
通常我们写代码是这样的
<html><head></head> <body> 我是内容 </body> </html>只需改成这样
<html><head></head> <body> <div class="page-container"> 我是内容 </div> </body> </html>.page-container::beforer{content:" "; position:absolute; left:0; right:0; top:0; bottom:0; background-color:#ccc;/* 颜色自定义 */ z-index:-100;/* 突然想到个游戏，是男人就下100层。。。 */ }转载于:.html
本文发布于:2024-01-27 18:57:16，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063530342020.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
