无法使页脚转到页面底部答案

【问题标题】：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;
}

无论我尝试其他人在 Stackoverflow 上发布的哪种解决方案，都没有任何效果，它要么无法将页脚向下移动到页面底部，要么只是弄乱了页脚的圆角布局。

【问题讨论】：

问题是你的#global 元素没有到达底部。使用 Firebug 来检查它，或者在你的 css 中给它加上一个边框，这将变得清晰。你需要让它去底部，然后你的页脚可以移动到底部。注意：要让它跨越整个高度，你可能想要做类似html, body {height: 100%;} 然后`#global {height: 100%;}
@BuddhistBeast 理论上是的，但是因为这是我的代码的提取部分，所以我不确定它是否完全代表我正在做的事情。
@cale_b 你是对的，我尝试设置边框，没有一个 Div 向下延伸到页面底部，即使在添加 height:100% 之后；到 #global 和 body。
我的问题是......你需要拥有那个全局 div 还是只需要包装器就足够了？所有的测量都是一成不变的吗？我问的原因是因为1020px很多..我认为现在的标准是960px。
真的吗？因为我是根据我的屏幕设计的，所以猜这是一个错误的举动。但是如果我缩小到 1020px 以下，导航栏会自行折叠并换行，看起来不太好.. 嗯，这不是问题的重点，我想我们可以忽略它。

标签： html css layout footer sticky

【解决方案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;

【讨论】：

这行得通，但没有人会为流畅的页面设计硬编码最小高度，网站的每个访问者都会使用不同的屏幕分辨率。
你试过了吗？stackoverflow.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 移出包装器后，它似乎已经与它“断开连接”，因此，内容和圆角在页脚不会一起流动和连接。就像你在上图中看到的那样。
您是否试图让一切都保持联系？喜欢在您的页脚和其他内容之间没有空格？