Question

如果页面内容不足，如300像素左右，页脚将以1024分辨率显示在页面中间。

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

我尝试过this解决方案：

/* 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>

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

Answer 1

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

Answer 2

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

这将使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>

CSS - 将FLUID高度页脚粘贴到页面底部

2 个答案: