前言

当然 js 等自动计算肯定可以，此处只讨论 css 怎么做比较帅！（应该 css 的任务就 css 做）

问题描述

网页非全屏状态下打开（有最小宽度内容的）网页，其 html、body、最外层 div（设置了暗色背景希望占满屏幕）等元素设置了 height 100%（宽度默认 100%）但效果如下： 向右拖动滚动条，暗色背景（以及底部）不能占满。显得很菜！

问题解决

横向

直接设置 html 的 min-width 为内容最小宽度与各种margin、padding之和。

效果如下：

纵向

这略复杂，不过就多一步 先看 min-height 属性，只能设置自身，不能影响到子元素，也就是说 父元素（html）设置为 min-height为100%或具体px，都无法使子元素（body）的 height 100% 铺满

效果如下：（body 设置 height100%，html 高度是占满的）

同理，body 及其子元素如此设置相同。

所以 html、body 等无背景效果的外层元素直接设置 height: 100%; 以影响子元素占满，之后再设置有暗色背景的 div 元素 min-height: 100%; 就可以了，不能设置 height: 100%; 以让子元素撑起其高度。

效果如下：

同时，body 因为 html 设置了 最小宽度，所以 body 宽度也是占满，高度是 100%（网页视高度），但子元素（暗色背景）的高度至少是 网页窗口的高度，同时也被子元素撑起，所以当文本高于网页高度时，其暗色背景同样可以延伸到同等高度，（不过 body 只能是网页高度了，因为设置了 height: 100%）但效果到了

总结

部标签统一设置 height: 100%;，只需要设置 需要铺满的暗色背景元素为 min-height: 100%; 便可铺满并被子元素撑起高度。