css - 随内容增长但开始填满整个页面的动态 div

Question

提前致谢。现在我对“包装”中的“内容”和“页脚”有疑问。以下是它们的样式。

#content
{

   width: 100%;
   min-height: 100%;
   position: relative;
   background-color: #b2b2b2;

}

#footer
{

   width: 100%;
   min-height: 40px;
   position: relative;
   bottom: 0;
   background-color: #e23e23;

}

#wrapper
{

   width: 100%;
   height: 100%;
   background-color: green;
   position: fixed;
   top: 0;
   left: 0;

}

这一切都很好，除了我希望内容占据页面的其余高度(页脚除外)。我用来执行此操作的任何方法都可以做到，如果我过度填充内容，内容就会超过页脚。

换句话说，我希望内容和页脚占据窗口的高度，但如果内容过多，它应该将页脚向下推并创建一个滚动条。

这可以用 css 完成吗？如果不能，我该如何用 JS 完成？

Answer 1

听起来您想要的是“粘性页脚”。以下是一些引用资料:

• > http://css-tricks.com/snippets/css/sticky-footer/
• > http://www.cssstickyfooter.com/
• > http://ryanfait.com/sticky-footer/