身体高度没有填满页面[重复]
Posted
技术标签:
【中文标题】身体高度没有填满页面[重复]【英文标题】：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%
【参考方案1】：
问题在于，无论内容是否溢出，正文都保持页面的高度。
使用min-height，如果内容不高于窗口，它将是页面高度，但如果是，它将增长以适应内容：
body
background: white;
max-width: 320px;
min-height: 100%;
margin: auto;
http://jsfiddle.net/bv1aaub6/
【讨论】：
感谢您的解决方案！它不适用于我的代码，所以我发现这是由浮动 div 引起的。如果正文中有浮动 div，则此解决方案将不起作用，因此我不得不将浮动替换为 flex.... 难以置信。 @MaRco85 与浮动的技巧，你可以将他们的父母溢出设置为隐藏，在你的情况下bodyoverflow: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.... 难以置信。以上是关于身体高度没有填满页面[重复]的主要内容，如果未能解决你的问题，请参考以下文章