CSS粘性页脚 - 内容样式的问题

我试图用CSS实现粘性页脚。我意识到这是一个常见问题，所以我尝试了通过Google找到的各种解决方案。CSS粘性页脚 - 内容样式的问题

但是，我发现的解决方案中没有一个能完成我正在尝试完成的任务。我不仅希望页脚处于最底部，而且还可以在页眉和页脚之间放置一个div，即使没有足够的内容，也可以占用所有可用空间（想象一下，如果在#content之间放置边框，它应该从头部一直扩展到页脚，无论内容有多少）。

这是解决方案失败的地方。无论是“推”元素阻碍。或者，没有办法将div设置为100％而不破坏页脚或将页面宽度增加到100％以上。

下面是基本标记：

<!DOCTYPE html> 
<html> 
    <body> 
     <header> 
      Header! 
     </header> 
     <div id="content"> 
      Content! 
     </div> 
     <footer> 
      Footer! 
     </footer> 
    </body> 
</html>

再次，我已经跑出去的想法，使CSS做我想做的事情。我可能不会使用Javascript。帮帮我？

编辑：我宁愿头有一个动态的高度。在任何时候都不应该看到页脚。它应该像this一样工作。编辑2：它应该看起来有点像this，除了黑色区域应该一直延伸到页脚。

来源

2013-03-02 ryyst

试试这个页脚

position：fixed;

bottom：0;

页脚将始终可见，无论滚动位于何处。

来源

2013-03-02 16:10:12 Codeformer

对不起，如果我不清楚，但页脚不应该总是可见。 – ryyst 2013-03-02 16:12:50

，最好的办法是有一个绝对div为您的内容上同时设置了和bottom: FOOTER_HEIGHT;

也推DIV inner具有100％的高度，其母公司应该有一个height不min-height。为防止将min-height更改为height，您应该添加overflow: visible;。

来源

2013-03-02 16:15:37 Sheric

动态标题高度有可能吗？ – ryyst 2013-03-02 16:25:26

你也可以把这个标题放在这个div中，并且在顶部设置0。 – Sheric 2013-03-02 16:47:56

我只是摆弄了一下，但我没有得到它的工作。 – ryyst 2013-03-02 16:59:52

为了使“内容” 100％的高度，必须设置html和body既100%高度和内容100%的min-height为好。

您还需要填充内容的顶部/底部，以便页眉和页脚（绝对定位以免混乱100％高度以创建不必要的滚动条）。这个填充要求你知道页眉/页脚的高度，但是因为它们应该是静态的，所以你很可能会这样做。

最后，需要border-box作为box-sizing的内容，以防止从到的填充高度。

无论内容的大小如何，这都可以工作。

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
} 
#content { 
    min-height: 100%; 
    background-color: blue; 
    padding-top: 50px; 
    padding-bottom: 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    color: white; 
} 
header { 
    height: 50px; 
    background-color: yellow; 
    position: absolute; 
    width: 100%; 
} 
footer { 
    position: fixed; 
    background-color: red; 
    height: 50px; 
    bottom: 0; 
    width: 100%; 
}

在行动：

http://jsfiddle.net/s8gZB/2/

http://jsfiddle.net/s8gZB/1/

来源

2013-03-02 16:20:49

我编辑了我的问题，页脚不应始终显示，它应该像[this]（http://www.cssstickyfooter.com）一样工作。 – ryyst 2013-03-02 16:25:10

@ryyst更多类似这样？ http://jsfiddle.net/s8gZB/3/（取消注释JS并再次运行以增加'＃内容的大小） – 2013-03-02 16:28:17

像[this]（http://jsfiddle.net/awTZS/），除了黑色部分应该 – ryyst 2013-03-02 16:38:49

CSS粘性页脚 - 内容样式的问题

回答

相关问题