全屏div，全屏，带页脚

Question

在过去的几周里，我一直在学习html和css。现在我必须为学校制作一个文件夹网站，它是下周三到期的。不幸的是，我不能让它以我想要的方式工作，我希望在这个网站上找到一些帮助。

我有这样一个想法，一个网站由一个全角的div和一个全角的页脚组成。我们的计划是让页脚总是贴在div的底部(除非屏幕太小，这样页脚就不会与内容重叠)，div会根据内容的大小调整大小。它似乎可以在我的小屏幕笔记本电脑上工作，但当我在一台大屏幕的电脑上打开网站时，它无法正确定位页脚。

该网站可在http://home.deds.nl/~gwleuverink/concept/index.html上查看。

我希望有人能帮我解决这个问题！

Answer 1

请参阅此示例

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

有关更多信息，请查看此链接http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page