使正文具有 HTML 100% 高度答案

【问题标题】：Make body have HTML 100% height使正文具有 HTML 100% 高度
【发布时间】：2014-10-20 13:23:35
【问题描述】：

我在 CSS 基础方面遇到问题。

正如您在LIVE DEMO 上看到的那样，左侧导航栏占主体高度的 100%。但由于 body 只占用视口 100% 的高度，即使 HTML 和内容都比这更长，它也会在视口底部切开。

我尝试过可能的事情，例如：

body, html{min-height:100%}

或

html{height:100%}
body {min-height:100%}

没有阳性结果。

我需要左侧导航栏只要是HTML（只要页面内容，body也应该有）。

【问题讨论】：

100% Min Height CSS layout的可能重复

标签： css

【解决方案1】：

您可以添加bodydisplay: table:

body {
  background: white;
  color: #000000;
  font: 300 14px/20px'Open Sans', sans-serif;
  background-color: #fafdfe;
  height: 100%;
  display: table;/*add display table*/
}

【讨论】：

在 body 和 left nav 上都添加这个，似乎解决了。只是一个问题：这是解决此问题的正确方法吗？我通常不会在 BODY 上看到这个 CSS 属性，而其他网站的 body 会占用 100% 的内容。这就是为什么我无法解释为什么我会遇到这种情况..
嗯，不确定这会出现什么潜在问题。找不到任何说实话。
谢谢。我会在 4 分钟内打勾，但如果其他用户找到了这种行为的原因并给出了合乎逻辑的解决方案（因为这似乎不是身体高度的合乎逻辑的行为），也许我不得不取消打勾。无论如何，这现在解决了我的问题，非常感谢您的帮助。
没问题，但我建议以后使用更好的html/css结构来实现这个结果。
找到它：这是由于 BODY 没有任何流入的 HTML 元素造成的。全部都向左飘了。我创建了一个 display:block 主容器并将所有内容定位为 inline-block。现在一切顺利

【解决方案2】：

实际上，您不需要display: table;。看看这个：

.sidebar {
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(126, 190, 235, 0.2);
    border-right: 1px solid rgba(126, 190, 235, 0.6);
    width: 200px;
}

小提琴：http://jsbin.com/xumoqalivu

【讨论】：