只能使页脚停留在底部

当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，它会覆盖包装。 我也使用body {height：100％}，它不适合我。有人可以尝试在我的网址上进行修改吗？

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

来源

2014-07-17 Xinrui Ma

我认为你正在寻找[sticky footer]（http://ryanfait.com/sticky-footer/） – HJ05

它位于页面的最底部：http://jsfiddle.net/hvNg2/2 /你是否希望它始终保持在屏幕上？ – BuddhistBeast

这不是如果你的包装里面没有足够的内容@BuddhistBeast –

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

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

来源

2014-07-17 19:39:27

如果我使用position：absolute，页脚会弹出并覆盖包装。 –

您的身体元素存在问题。我更新了我的答案。 –

您必须将其排除正常流量并修复位置。这种添加到您的页脚

position: absolute;

为其他控件，您可以添加

top:

要控制页脚的高度。

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

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

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

min-height: 100%

试试这个。

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

下面是在包装和页脚上都使用绝对定位的示例。 http://jsfiddle.net/mLRq3/

不要考虑“身高身高为浏览器高度的100％”，不管身体或浏览器身高如何，都可以考虑在底部附加页脚。这样，浏览器的高/大/小/宽无关紧要，因为你总是从底部开始。

来源

2014-07-17 19:41:51 Aaron

是的，但是即使我为我的warpper设置了一个固定的高度，它也不起作用。有些事情一定是错的。 –

您是否在包装上删除了最小高度：100％？从你提供的方式来看，如果你想在下面堆叠页脚，你的代码最小高度不应该是100％的包装。 – Aaron

只能使页脚停留在底部

回答

相关问题