html - 在 CSS 中保持页脚可见且高度为 100%

Question

我正在尝试创建一个非常简单的页面，其中包含一个容器、一个页眉、一个左栏和一个页脚:

<containter>
<header />
<content />
<leftBar />
<footer />
</containter>

我想使用 100% 的高度，就像我可以使用宽度一样，但我只是没有让它工作。此时我正在使用 min-height，但我如何使用 height:100%` ？我喜欢的是页脚始终可见，并且您可以滚动内容。

当前 CSS

body
{
    font-family: Verdana;
    font-size: 0.8em;
    background-color:#f1f1f1;
}

#container {
   border:solid 2px Black;
   position:absolute;
   left:10%;
   width:80%;
   margin:auto;
}

#header {
  height:20px;
  background: #DDDDDD;
}

#leftBar {
  width: 20%; 
  background: #669966; 
  min-height:600px;
  postion:absolute;
  top:20px;
  bottom:20px;
}

#content {
  float:right;
  background-color: #cdcde6;
  position:absolute;
  left:20%;
  right:0px;
  bottom:20px;
  top:20px;
  padding:5px;
}

#footer {
 position:absolute;
 height:20px;
}

Answer 1

/**
 * The following allows the usage of height=100% in body tag.
 * Creds to: http://apptools.com/examples/tableheight.php
 */
html,body
{
    margin    : 0;
    padding    : 0;
    height    : 100%;
    border    : none;
}

你需要让它 html 和 body 占据浏览器视口(viewport)的 100%。