4

如果页面内容不多，如 300 像素左右，页脚将出现在页面中间，分辨率为 1024。

在不知道页脚高度的情况下，如何让页脚显示在页面底部？

我试过这个解决方案：

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

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

但问题是我需要padding-bottom: (footerheight);在#footer 之前添加元素。这是不可能的，因为页脚高度因页面而异...

4

2 回答 2

2

你为什么不在内容区域上使用 min-height 所以如果你将 min-height 设置为 600px 如果只有 300px 的内容，它会将页脚向下填充另外 300px 所以它不在屏幕中间

于 2011-01-24T14:29:34.047 回答
0

你无法逃避这一点，但有一个技巧：使正文背景与页脚的背景相同，然后将所有其他内容放在正文顶部的容器中。

这将创建一个 75px 的页脚。注意容器 div 的相关 -75px 边距。

html {
  height:100%;
  padding:0px;
  margin:0px;
}
body {
    height:95%;
    padding:0px;
    margin:0px;
    background-color:#1C303C;
}

footer {
    background-color:#1C303C;
    color:#FFFFA3;
    display:block;
    position:absolute;
    width:100%;
    min-height:75px;
    height:75px;
    margin:0px;
    padding:0px;
    left:0px;

}

#container {
    background-color:#FFFFFF;
    min-height:100%;
    height:100%;
    width:100%;
    top:0;
    left:0;
    margin: 0;
    padding:0;
    margin-bottom:-75px;
}

相关的HTML如下：

<body>
    <div id="container">
    </div>
    <footer>
    </footer>
</body>
于 2013-12-28T05:24:55.573 回答