无法使页脚转到页面底部
Posted
技术标签:
【中文标题】无法使页脚转到页面底部【英文标题】：Unable to make footer go to bottom of page 【发布时间】：2014-01-11 01:09:25 【问题描述】：我在尝试实现粘性页脚时遇到了一些问题，即让页脚停留在页面的最底部，我认为这个问题是由于我使用 2 个 div 为我的页面呈现圆角，我已经搜索了所有可能的解决方案并尝试了它们，但没有任何效果。
所以基本上，这是我的设计：
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</div>
这是我的 CSS：
body
font-family: Verdana, Geneva, sans-serif;
#global
margin: 0 auto;
width: 85%;
min-width: 1020px;
.wrapper
background: #FFFFFF;
.footer
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
.footer div
height: 40px;
background: url('../Images/roundedcornerLEFT.gif') no-repeat bottom left;
.footercontent
text-align: center;
font-size: small;
无论我尝试其他人在 *** 上发布的哪种解决方案，都没有任何效果，它要么无法将页脚向下移动到页面底部，要么只是弄乱了页脚的圆角布局。
【问题讨论】：
问题是你的#global 元素没有到达底部。使用 Firebug 来检查它，或者在你的 css 中给它加上一个边框，这将变得清晰。你需要让它去底部，然后你的页脚可以移动到底部。注意：要让它跨越整个高度，你可能想要做类似html, body height: 100%; 然后`#global height: 100%;
@BuddhistBeast 理论上是的，但是因为这是我的代码的提取部分，所以我不确定它是否完全代表我正在做的事情。
@cale_b 你是对的，我尝试设置边框，没有一个 Div 向下延伸到页面底部，即使在添加 height:100% 之后；到 #global 和 body。
我的问题是......你需要拥有那个全局 div 还是只需要包装器就足够了？所有的测量都是一成不变的吗？我问的原因是因为1020px很多..我认为现在的标准是960px。
真的吗？因为我是根据我的屏幕设计的，所以猜这是一个错误的举动。但是如果我缩小到 1020px 以下，导航栏会自行折叠并换行，看起来不太好.. 嗯，这不是问题的重点，我想我们可以忽略它。
【参考方案1】：
试试这个：
.footer
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
position: absolute;
bottom: 0;
【讨论】：
不起作用，整个页脚似乎已经脱离了包装并调整了自身大小，我的网页使用的是流体设计，所以我的意思是页脚的宽度大小不一样作为主要设计了。看这张图片：img809.imageshack.us/img809/5605/xvti.png【参考方案2】：如果您希望底部有页脚，请为您的内容指定一个最小高度。
min-height: 800px;
【讨论】：
这行得通，但没有人会为流畅的页面设计硬编码最小高度，网站的每个访问者都会使用不同的屏幕分辨率。 你试过了吗？***.com/questions/9642460/…【参考方案3】：将您的标记更改为：
<body>
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</body>
然后添加这些样式：
.footer
position:fixed;
left:0px;
bottom:0px;
width:100%;
【讨论】：
试过了，但我必须删除“left:0px;”和“宽度：100%；”因为我使用的是非 100% 宽度的居中设计。但删除它后，会发生这种情况：img809.imageshack.us/img809/5605/xvti.png【参考方案4】：好的，假设你想保留你目前正在做的一切......我有一个快速解决方案给你。现在，有几点需要注意。我确实在您的“包装器”类中添加了一个高度变量，因为我需要衡量它，就好像包装器本身内部有空间一样。我还继续添加了几种颜色，让我确切地知道我在哪里。无论哪种方式，最简单的解决方法是将页脚 div 放在包装器之外。这一切的工作方式是，页脚出现在包装类中，唯一的问题是该类中没有其他任何东西出现，这导致页脚是唯一的东西.. 产生了这个页脚的问题在顶部。但是，如果您想保持每个页面的最新状态，将页脚向下移动到全局 div 的底部应该是您的解决方法，下面的代码：
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div>
</div>
</div>
所以问题出在 HTML，而不是 CSS。您可以保留您的 CSS 或随意使用它，但为了更好地描述我在说什么，我一直在为您摆弄（哈哈）JsFiddle :) 如果我需要更了解我是什么，请在下面评论说！
【讨论】：
这就是为什么我没有将页脚 div 移出包装器的原因：img541.imageshack.us/img541/57/nxq1.png 从技术上讲..“全局”是你的包装器，而不是包装器。你可以通过简单地取出“全局”div然后将页脚仍然放在包装器的底部来改变它。 这就是你的代码没有“全局”div jsfiddle.net/XqNzp/3 时的样子，它仍然可以正常工作。 我不认为全局 div 与这个问题有任何关系，在将页脚 div 移出包装器后，它似乎已经与它“断开连接”，因此，内容和圆角在页脚不会一起流动和连接。就像你在上图中看到的那样。 您是否试图让一切都保持联系？喜欢在您的页脚和其他内容之间没有空格？以上是关于无法使页脚转到页面底部的主要内容，如果未能解决你的问题，请参考以下文章