html 正文小于其内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9398313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html body is smaller than its contents
提问by spraff
Here's a basic illustrationof the problem:
这是问题的基本说明：
<html><head><style type="text/css">
? ??html {width: 100%; height: 100%; background: red;}
? ??body {width: 100%; height: 100%; background: green;}
? ??
? ??.leftbar, .rightbar {height: 100%; background: blue;}
? ??.leftbar??{float: left;}
? ??.rightbar {float: right;}
? ??table {width: 100px; height: 800px; background: black; color: white;
? ? ? ? ? ?margin: 0 auto 0 auto;}
</style></head>
<body>
? ??<ul class="leftbar"><li>one</li><li>two</li></ul>
? ??<ul class="rightbar"><li>alpha</li><li>beta</li></ul>
? ??<table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>?
We can immediately see that the floated ulelements are as tall as the bodywhich contains them, the problem is that the bodyis not as tall as the tablewhich it contains.
我们可以立即看到浮动ul元素和body包含它们的一样高，问题body是 没有table它包含的那么高。
How do I make the bodybe big enough? In this example, I want the leftbarand rightbarto go all the way down, as far as scrolling allows, so you can never see any gap below them.
我如何使body足够大？在这个例子中，我希望leftbar和rightbar一直向下，只要滚动允许，所以你永远看不到它们下面的任何间隙。
采纳答案by spraff
Use tables. They're impure but they work.
使用表格。它们不纯，但有效。
The div-based solutions involve unacceptable compromises (absolute dimensions, loss of float).
基于 div 的解决方案涉及不可接受的妥协（绝对尺寸、浮动损失）。
回答by Alexander Pavlov
Remove height: 100%from your bodyrule - this makes the body as tall as the viewport height (which is less than the contents height).
height: 100%从您的body规则中删除- 这使主体与视口高度一样高（小于内容高度）。
回答by jmbertucci
body{ height:100%; }
This appears to be a misunderstanding of the code. A "100%" height is relative to something. In other words "100% of what?"
这似乎是对代码的误解。“100%”高度是相对于某物的。换句话说，“什么是 100%？”
What this does is set body = the size of the window. in JSFiddle, it's the size of the rendered box. On a browser, it would be 100% of the viewing window.
这样做是设置 body = 窗口的大小。在 JSFiddle 中，它是渲染框的大小。在浏览器上，它将是 100% 的查看窗口。
So, if shrink your browser window down to a tiny view space, 100% height will be 100% of the tiny size. Which is accurate.
因此，如果将浏览器窗口缩小到很小的视图空间，100% 的高度将是 100% 的微小尺寸。这是准确的。
If you have content that's longer than that, well you run into the issues you see in your example. Recall that the table is a child element, not a parent container. CSS inherits from parents, not children. So you have to make sure BODY remains dynamic in it's height setting.
如果您的内容比这更长，那么您就会遇到您在示例中看到的问题。回想一下，表是一个子元素，而不是父容器。CSS 继承自父母，而不是孩子。所以你必须确保 BODY 在它的高度设置中保持动态。
update
更新
Here's a JSFiddle for min-height on body; http://jsfiddle.net/uZCKn/1/It need HTML height to be 100% to work. Got that from here: min-height does not work with body
这是一个关于身体最小高度的 JSFiddle；http://jsfiddle.net/uZCKn/1/它需要 HTML 高度为 100% 才能工作。从这里得到的：min-height 不适用于 body
The only thing I can think of is a JavaScript to set the height of the side bars or to use faux-columns. But there could be something else going on to get the left/right bar to fill it's containers height as well that I'm missing.
我唯一能想到的就是用 JavaScript 来设置侧边栏的高度或使用假柱。但是可能还有其他事情要做，以使左/右栏填充它的容器高度以及我所缺少的。
There's part of an explanation.
有部分解释。
回答by hradac
To fix the body height not going all the way down change body{height:100%}to min-height:100%. If you care, this will not work in IE6. To fix your lists take the floats out. Add position:relativeto the body, add position:absoluteto .leftbar, .rightbarand set the positions as follows
要固定身体高度不会一直下降，请更改body{height:100%}为min-height:100%. 如果您关心，这在 IE6 中将不起作用。要修复您的列表，请取出浮动。添加position:relative到body，添加position:absolute到.leftbar, .rightbar并设置位置如下
.leftbar {left:0; top:0;}
.rightbar {right:0; top:0;}
You can see it in the fiddle I linked above.
你可以在我上面链接的小提琴中看到它。
回答by Fillype Farias
remove
消除
html, body { height: 100%; }
and add
并添加
body { height: fit-content; }
The other thing is to certificate that there is not child div's that is making the things smaller then it really should be.
另一件事是证明没有子 div 使事情变得更小，那么它确实应该如此。
回答by Indevelop
If you use floats, you must use clearfix. Example (overflow: hidden to parent div give you a simplest clear fix):
如果使用浮点数，则必须使用 clearfix。示例（溢出：隐藏到父 div 为您提供了一个最简单的明确修复）：
<div style="overflow: hidden;">
<ul class="leftbar">
<li>one</li>
<li>two</li>
</ul>
<ul class="rightbar">
<li>alpha</li>
<li>beta</li>
</ul>
</div>
You can google more clearfixes, especially for your case
你可以谷歌更多的clearfixes，尤其是你的情况
