Question

当HTML页面包含少量内容时，页脚有时会位于页面的中间位置，下方会留下空白区域。这看起来很糟糕，特别是在大屏幕上。网页设计师经常被要求将页脚推到视口的底部，但是如何做到这一点并不是很明显。

我有这样的html结构：

<html>
  <body>
    <div class="wrapper">
        ....
    </div>
    <div class="footer" id="cdFooter">
        .......
    </div>   
  </body>
</html>

我试过互联网说，设置像这样的CSS规则

html,body {
    position: relative;
    min-height: 100%;
}

.wrapper {
    min-height:100%;
    position: relative;
    overflow:hidden !important;
}
.footer {
    bottom: 0;
    width: 100%;
}

（您可以在下面的网址中看到其他一些css规则，我无法在此处输入太多代码。）

但如果您使用的是大屏幕桌面，页脚仍然不在浏览器的底部。您可以在以下网址查看结果：http://dev.xinruima.me/readistep/

有人说，我需要设置包装器有一个像margin-bottom这样的规则：** px，但这对我的网站不起作用。

有人可以查看我的网址，看看有没有办法解决这个问题？我希望它具有响应性，所以我可能不会使用固定的高度来推动元素或类似的东西。

感谢。

如果我使用position：absolute，它将覆盖包装器。 我也使用身体{身高：100％}，它对我不起作用。有人可以尝试修改我的网址吗？

我认为问题是，如果我们可以将身高100％作为浏览器高度，就像html一样，它会解决问题，希望如此。

Answer 1

您没有指定页脚的显示方式。您还需要更改身体元素的高度：

body {
    height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Answer 2

你必须将它从正常流量中取出并修复位置。将其添加到页脚

position: absolute;

对于其他控件，您可以添加

top:

控制页脚的高度。

编辑：您重叠的原因可能是因为您的包装器没有定义的高度，因此它与包装器重叠，因为高度未定义，因此从顶部开始。

另一种方法是在包装上定义绝对定位，然后使用顶部和底部来控制高度。

编辑：从所有属性中删除最小高度。你不需要它。这只是弄乱了其他块元素。

min-height: 100%

试试这个。

.wrapper {
    position: relative;
    overflow: hidden
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

这是一个在包装器和页脚上使用绝对定位的示例。 http://jsfiddle.net/mLRq3/

不考虑身体高度100％作为浏览器高度＆＃34;而是考虑在底部附加一个页脚，无论身体或浏览器高度是多少。这样，浏览器的高度/大/小/宽并不重要，因为您总是从底部开始。

只是不能让页脚停留在底部

2 个答案: