html 正文小于其内容答案

【问题标题】：html body is smaller than its contentshtml 正文小于其内容
【发布时间】：2012-03-12 23:43:24
【问题描述】：

这是问题的基本illustration：

<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>

我们可以立即看到浮动的ul 元素与包含它们的body 一样高，问题是body 没有它包含的table 高。

如何使body 足够大？在此示例中，我希望 leftbar 和 rightbar 一直向下，只要滚动允许，因此您永远看不到它们下方的任何间隙。

【问题讨论】：

标签： html css

【解决方案1】：

从您的 body 规则中删除 height: 100% - 这会使主体与视口高度一样高（小于内容高度）。

【讨论】：

这使得body 更高，但ul 仍然只是视口的高度。
有道理。要让uls 填满body，它需要设置一些确定的高度。将其设置为800px，与其最高的子元素相同。
这很有意义，并且完全解决了我在一年前在一个网站上遇到的这个随机烦人的问题。我将它从 height:100% 切换到 min-height:100% 以考虑正文比视口短的页面。谢谢！
如果您将背景应用到该主体内的 100% 容器，并且内容没有视口那么高，但是您的背景将被剪切。（如果你使用这种方法）

【解决方案2】：

body{ height:100%; }

这似乎是对代码的误解。 “100%”的高度是相对于某物的。换句话说，“什么的 100%？”

它的作用是设置 body = 窗口的大小。在 JSFiddle 中，它是渲染框的大小。在浏览器上，它将是 100% 的查看窗口。

因此，如果将浏览器窗口缩小到一个很小的视图空间，那么 100% 的高度将是该微小尺寸的 100%。哪个是准确的。

如果您的内容比这更长，那么您会遇到您在示例中看到的问题。回想一下，表是子元素，而不是父容器。 CSS 继承自父母，而不是孩子。所以你必须确保 BODY 在它的高度设置中保持动态。

更新

这是一个用于身体最小高度的 JSFiddle； http://jsfiddle.net/uZCKn/1/ 它需要 HTML 高度为 100% 才能工作。从这里得到：min-height does not work with body

我唯一能想到的是一个 JavaScript 来设置侧边栏的高度或使用假列。但是可能还有其他事情可以让左/右栏填充它的容器高度，我也错过了。

有部分解释。

【讨论】：

【解决方案3】：

http://jsfiddle.net/6ZeLh/

要解决车身高度不会一直下降的问题，请将 body{height:100%} 更改为 min-height:100%。如果你在乎，这在 IE6 中不起作用。要修复您的列表，请取出浮动。将position:relative添加到body，将position:absolute添加到.leftbar, .rightbar并设置位置如下

.leftbar  {left:0; top:0;}
.rightbar {right:0; top:0;}

你可以在我上面链接的小提琴中看到它。

【讨论】：

啊，这是一个很好的解决方案。将侧边栏设为绝对位置。

【解决方案4】：

删除

html, body { height: 100%; }

并添加

body { height: fit-content; }

另一件事是证明没有子 div 使事情变得比它真正应该的更小。

【讨论】：

fit-content 是一个实验性属性，不应在 2017 年的生产代码中使用。
@TylerH 您能否发布一些链接以了解有关此问题的更多信息？

【解决方案5】：

使用表格。它们不纯，但它们工作。

基于 div 的解决方案涉及不可接受的妥协（绝对尺寸、浮动损失）。

【讨论】：

fsvo “工作”。认为仅仅因为它们适用于您的特定用例，它们必须适用于您的内容将被访问的所有其他上下文是短视的。
它们在必要的环境中工作，而替代方案不。
我们对可能解决 OP 问题的有效答案投了反对票，这并不能很好地反映我们的社区，因为它已经过时了。表格很难维护，并且会破坏正常的流程，但它们是解决一些棘手的布局问题的智能解决方案，尤其是在前 flexbox 世界中。（与普通块级元素上的 display: table; 一样。）

【解决方案6】：

如果使用浮点数，则必须使用 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>

您可以在 Google 上搜索更多的 clearfixes，尤其是针对您的情况

【讨论】：