我正在用 HTML 创建一种文本幻灯片演示文稿。基本布局是全屏固定背景图像，文本位于其前面的居中全高列中。基本的 HTML 结构非常简单:
<body>
<div>
<h1>Test</h1>
Text.
<br />
<br />
Text.
</div>
</body>
设置这个并不难，除了一件事:为了让包含文本的 div 显示整个窗口的高度，所有三个主要元素的高度——html、body 和 div—— - 必须设置为 100%。我不确定我是否正确解释了发生的事情，但它似乎会导致 div 内元素的任何边距或填充被添加到 div 的高度 after div 已经已扩展到视口(viewport)高度的 100%。因此，即使 div 的实际内容小于窗口的高度，它的计算高度大于视口(viewport)的高度，并且产生垂直滚动条，即使是最小的内容。
我在这里错过了什么？
CSS 代码如下，请查看此 fiddle 以了解我的意思:http://jsfiddle.net/NL4gg/3/
[到目前为止，我已经在 webkit 浏览器(Chrome 和 Safari)中对此进行了测试；如果您没有看到我在 fiddle 中描述的问题，那可能就是原因。]
html {
height:100%;
}
body {
color: #000;
background: url(https://farm9.staticflickr.com/8173/8038716643_270547eb16_o.jpg) no-repeat fixed center center;
margin:0 auto;
height:100%;
width:50%;
}
div {
background-color:rgba(255,255,255,0.5);
height:100%;
padding:1em;
}
注意:这可能是同一个问题，但没有回答，here .
最佳答案
添加
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
关于css - DIV 高度超过固定背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20229774/