为什么要在html和body加上“height:100%;”

weixin_34306593

于 2015-01-15 15:32:27 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000002488150

本文深入探讨了在网页设计中合理使用HTML和CSS布局，特别是通过设置body和html元素的样式来实现视觉效果与布局优化的方法。详细解释了如何仅通过调整body和html的样式属性，如height, background-color等，来精确控制页面元素的显示位置和大小，以达到既美观又实用的设计目标。同时，通过实际案例演示了在文件流不占满窗口的情况下，如何利用这些布局技巧展示背景颜色、图片等元素，使网页设计更加灵活且富有创意。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为如果不加，那么body高度的值，就是页面所有元素所到达的高度。

可以给body加上一个背景颜色来查看效果，如果文件流不是很长，不至于占满整个窗口（未产生滚动条），那么可以看到背景颜色只是作用到文件流的末尾。

而给html的加上"height:100%;"这一样式，则指定了body的父元素高度为100%，再在body中指定height:100%;，意味着占满整个窗口。

这样做，在文件流不占满窗口时，背景等效果也能很好地呈现。