Question

我在尝试实现粘性页脚时遇到了一些问题，即使页脚停留在页面的最底部，我认为这个问题是由于我使用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上的其他人发布的解决方案，没有任何效果，它将不会将页脚向下移动到页面底部，或者它只是与页脚的圆角布局混淆。

Answer 1

试试这个：

.footer { 
  background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right; 
  position: absolute;
  bottom: 0;
}

Answer 2

如果您希望底部的页脚为您的内容提供最小高度。

min-height: 800px;

Answer 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%;
}

Answer 4

好的，所以假设你想要保留你目前所做的一切......我有一个快速解决方案。现在，需要注意一些事项..我确实在你的'wrapper'类中添加了一个高度变量，因为我需要测量它，好像包装器本身里面有空间一样。我也继续前进并添加几种颜色让我知道我到底在哪里。无论哪种方式，最简单的解决方法是将您的页脚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的问题（哈哈）:)如果我需要更多地了解一下我在说！

无法页脚到页面底部

4 个答案: