身体高度没有填满页面[重复]答案

【问题标题】：body height does not fill page [duplicate]身体高度没有填满页面[重复]
【发布时间】：2016-02-18 23:50:54
【问题描述】：

我尝试在正文上设置 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;
}

我快疯了！

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

【问题讨论】：

我查过了。它有效。
您可以添加overflow:hidden; 以查看它的工作原理。
只是删除高度。将最小高度设置为 100%

标签： html css height

【解决方案1】：

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

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

http://jsfiddle.net/bv1aaub6/

【讨论】：

感谢您的解决方案！它不适用于我的代码，所以我发现这是由浮动 div 引起的。如果正文中有浮动 div，则此解决方案将不起作用，因此我不得不将浮动替换为 flex.... 难以置信。
@MaRco85 与浮动的技巧，你可以将他们的父母溢出设置为隐藏，在你的情况下body{overflow:hidden;}，父母会成长以适应他们

【解决方案2】：

将body 元素上的100% 的height 改为min-height：

Updated Example

在这样做时，body 元素将始终至少具有100% 的高度，而不是始终具有窗口的100% 高度（这就是您的问题所在)。

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

【讨论】：

感谢您的解决方案！它不适用于我的代码，所以我发现这是由浮动 div 引起的。如果正文中有浮动 div，则此解决方案将不起作用，因此我不得不将浮动替换为 flex.... 难以置信。

【解决方案3】：

您将 body 元素的高度限制为视口的高度。别。

body {
    /* height: 100% */
}

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

Demo

【讨论】：

感谢您的解决方案！它不适用于我的代码，所以我发现这是由浮动 div 引起的。如果正文中有浮动 div，则此解决方案将不起作用，因此我不得不将浮动替换为 flex.... 难以置信。

【解决方案4】：

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

jsFiddle example

【讨论】：

感谢您的解决方案！它不适用于我的代码，所以我发现这是由浮动 div 引起的。如果正文中有浮动 div，则此解决方案将不起作用，因此我不得不将浮动替换为 flex.... 难以置信。