Question

我试图在身体上设置100％的高度，如果没有内容，它会起作用，但是内容不会填充页面。

<html>
 <body>
 test body
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
</body>

html {
    background: red;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

body {
    background: white;
    max-width: 320px;
    height: 100%;
    margin: auto;
}

.item {
    height: 150px;
}

我正在搞MAD！

JS小提琴：http://jsfiddle.net/02dknpeo/2/

Answer 1

问题在于，无论内容是否溢出，正文都会保持页面的高度使用min-height如果内容不高于窗口，它将是页面高度，但如果是，则会增长以适合内容：

body {
    background: white;
    max-width: 320px;
    min-height: 100%;
    margin: auto;
}

http://jsfiddle.net/bv1aaub6/

Answer 2

将height元素的100%的{{1}}改为min-height而不是：

Updated Example

这样，body元素的至少高度为body，而不是总是高度为100%的窗口（这就是你的问题）。

100%

Answer 3

您将body元素的高度限制为视口的高度。唐＆＃39;吨。

body {
    /* height: 100% */
}

如果您需要它至少那么高，请使用min-height。

<强> Demo

Answer 4

只需从正文规则中删除height:100%。

<强> jsFiddle example

身高不填充页面

4 个答案: