如何强制我的列始终延伸到页面底部？

Question

当内容比视口短时,我需要将内容列扩展到页面底部,但在内容较长时仍然会展开.该列必须从页面顶部稍微向下.

这是我描述的HTML:

<html>
  <body>
   <div id="content">
      <p> asdf ghjkl </p>
    </div>
  </body>
</html>

这是CSS

#content {
  min-height: 100%;
  margin: 100px 0 0;
}

这种方法的问题是min-height: 100%;不考虑填充,因此页面总是比我想要的大.

这是我寻求的行为:

desiredbehavior

有没有办法在不使用Javascript的情况下完成此任务？

Answer 1

试试这个 jsFiddle： http: //jsfiddle.net/8R4yN/。它似乎按照你想要的方式工作。我从以下网址获取了一些提示： http: //www.tutwow.com/htmlcss/quick-tip-css-100-height/。看起来overflow是造成隐藏的原因，而#content内部也没有帮助:)。