使身体具有HTML 100％的高度

Question

我在使用CSS基础知识方面遇到了麻烦。

正如您在LIVE DEMO上看到的那样，左侧导航栏占据了身体高度的100％。但是由于body仅占据了视口高度的100％，因此即使HTML和内容都长于视口，它也会切入视口的底部。

我尝试过以下事情：

body, html{min-height:100%}

或

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

没有正面结果。

我需要左侧导航栏只要HTML （只要页面内容，身体也一样）。

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*/
}

Answer 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