粘滞页脚，或者说：内容不会延伸到页脚

所以我想在页面上粘一个页脚，并让this one为我工作。一切都很好，但不，不是真的..粘滞页脚，或者说：内容不会延伸到页脚

问题是，我希望页脚上方的内容一直向下伸展。现在，包含主要内容的框在框中的文本之后结束，并且在页脚和内容之间存在大的空间。我想要的是深入到页脚的主要内容的背景！看我美丽的形象！

footerproblem

这就是我现在所拥有的以html：

<div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
    <div id="main-content"> 
    </div> 
    </div> 
    <!-- end main --> 
</div> 
<!-- start footer --> 
<div id="footer"> 
</div>

而且在CSS：

html { 
    height: 100%; } 

body { 
    height: 100%;} 

/* wrap */ 
#wrap { 
    min-height: 100%; } 

/* main */ 
#main { 
    background-color: #43145c; 
    overflow: auto; 
    padding-bottom: 50px; } 

#main-content { 
    width: 720px; 
    margin: auto; 
    background-color: #643280; 
    padding-top: 20px; } 

#footer { 
    position: relative; 
    margin-top: -50px; 
    height: 50px; 
    clear: both; 
    background: red; }

我已尝试设置的主要以100％以上的高度，但没没有工作。我只是希望主要内容的背景颜色一直到页脚，因为它与主体和主框不同。

它有什么意义吗？谁能帮忙？

来源

2012-02-21 stinaq

设置主体的最小高度不能算出来，因为它的父母没有高度设置。 – 2012-02-21 21:24:28

试试这个：

在样式表与此更换你的HTML和车身式样：

html,body {height: 100%;}

然后用这个替换您的 “包装”：

#wrap { min-height: 100%; height: auto; }

希望这有助于。

来源

2012-02-21 21:27:16

不，实际上.. =（不知何故，主箱需要得到页眉和页脚之间的空间的最小高度，但我不知道如何 – stinaq 2012-02-21 21:39:29

@StinaQ：添加最小高度：页脚的高度;以MAIN div并将我的答案应用于指定的内容，试一试，如果其他方法都失败，请查看：http://ryanfait.com/sticky-footer/ – 2012-02-21 22:13:17

试试这个

HTML

<body> 
    <div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
     <div id="main-content"> 
     </div> 
    </div> 
    <!-- end main --> 

    <div class="push"></div> 
    </div> 

    <!-- start footer --> 
    <div id="footer"> 
    </div> 
</body>

CSS

 * { 
      margin: 0; 
      padding: 0; 
     } 

     html, 
     body { 
      height: 100%; 
     } 

     /* wrap */ 
     #wrap { 
      background: green; 
      height: auto !important; 
      margin: 0 auto; 
     } 

     #wrap, 
     #main, 
     #main-content { 
      margin-bottom: -50px; 
      min-height: 100%; 
      height: 100%; 

     } 

     /* main */ 
     #main { 
      background-color: #43145c; 
     } 

     #main-content { 
      width: 720px; 
      margin: 0 auto; 
      background-color: #643280; 
     } 

     .push, #footer { 
      height: 50px; 
     } 

     #footer { 
      position: relative; 
      background: red; 
     }

来源

2012-02-21 21:51:17 mikos

我知道这是问3个月前，但我一直在寻找解决这个问题相当而现在希望其他人可以从我被归档的解决方案中受益。当你说主盒子需要获得页眉和页脚之间空间的最小高度时，你就会发现它。

不幸的是，我不知道如何用纯CSS完成这个工作，当然这对javascript来说很容易，但是这个解决方案并不总是可行的，而且在代码分离方面有点混乱。好消息是，根据你需要做的事情，你可以使用CSS黑客技术。

我所做的是增加低于体温绝对定位的元素，基本上从标题到上述footer.This这样我可以添加背景或在此#divBelowBody一个梯度将拉长，基本上让我假装这个问题解决了（虽然这个解决方案留下了我口中的苦味）。另外，如果你想在内容div周围添加一个边框，并且希望即使在内容很小的情况下它可以扩展到页脚，你也会被搞砸了（虽然不是真的，但我可能会想到黑客或者两个人的共同努力这种可行的），因此它只能工作，如果你希望添加背景或渐变等

这里你可以看到在行动代码： http://jsfiddle.net/qHAxG/ 展开结果区段水平更清楚地看到这是怎么回事上。

来源

2012-09-02 08:41:48 RedHydra

看到THIS演示：它可能是有用的。看起来你想要一个背景色的div伸展到底部。但粘滞页脚的问题在于它也停留在底部 - 当内容延伸到视图端口时，不会出现问题。所以它需要一定的距离（内容的高度）才能知道如何做到这一点。如果这个高度不是由实际内容指定的...... 100％也不是真的要做的。因为那么“粘性”页脚并不真正起作用......它将不在屏幕上。它真的100％是什么？

这件事已经挫败了我一年......但我总有办法使它看起来我想即使是这样，如果我不能得到它的功能就是我想要的...希望该链接上面的演示可能会为这个难题增添另一块。祝你好运！

来源

2012-10-22 00:30:08 sheriffderek

粘滞页脚，或者说：内容不会延伸到页脚

回答

相关问题