css - 使正文具有 HTML 100% 高度

Question

我在 CSS 基础知识方面遇到困难。

正如您在这个 LIVE DEMO 上看到的那样，左侧导航栏占主体高度的100%。但由于 body 仅占据视口(viewport)的 100% 高度，因此即使 HTML 和内容都比这长，它也会在视口(viewport)底部剪切。

我试过很多东西，例如:

body, html{min-height:100%}

或

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

没有阳性结果。

我需要左侧导航栏与 HTML 一样长(与页面内容一样长，body 应该一样长)。

Answer 1

可以在body display: table中添加:

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