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

全屏div与一个完整的页脚

1 个答案: