Question

我正在用HTML创建一种文本幻灯片演示文稿。基本布局是全屏固定背景图像，文本位于其前面的居中全高列中。基本的HTML结构非常简单：

<body>
    <div>
         <h1>Test</h1>
         Text.
         <br />
         <br />
         Text.
    </div>
</body>

设置它并不困难，除了一件事：为了让包含文本的div显示窗口的整个高度，所有三个主要元素的高度 - html，body和div- - 必须设置为100％。我不确定我是否正在解释正确发生的事情，但它似乎导致div中的元素上的任何边距或填充被添加到div的高度之后 div已经已扩展到视口高度的100％。因此，即使div的实际内容小于窗口的高度，其计算高度也大于视口的高度，并且即使对于最小内容也会产生垂直滚动条。

我在这里缺少什么？

CSS代码如下，请查看这个小提琴，看看我的意思：http://jsfiddle.net/NL4gg/3/

[我到目前为止已经在webkit浏览器（Chrome和Safari）中对此进行了测试;如果你没有看到我在小提琴中描述的问题，那可能就是原因。]

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。

Answer 1

DEMO

添加

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

DIV高度超过固定背景图像

1 个答案: