Question

我一直试图让这项工作暂时搁置，但它似乎永远不会成功。我认为这是因为我的HTML结构与示例中的结构略有不同。我的问题是，在小于视口的页面上，页脚不会自动推到底部，而#main div不会扩展到页脚。

这是我的HTML：

<html>
    <body>
        <div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>
     </body>
</html>

这将是我的基本CSS，没有CSS Sticky Footer的实现：

div#container {
    width:960px;
    margin:0 auto;
}
div#main {
    background-color:black
    padding-bottom:30px;
}

div#content {
    width:425px;
}

div#footer {
    position:relative;
    bottom:0;
    width:inherit;
    height:90px;
}

澄清一下：让我们说div＃main的背景是黑色的。现在让我们说，在一个页面上，div＃main中只有一行文本。所以我想让#main区域一直向下延伸到页脚（位于页面底部），即使没有足够的内容强制发生这种情况。有意义吗？

还有一件事。 #main区域的背景颜色与主体不同。因此#main背景必须一直延伸到页脚，因为如果有间隙，则身体颜色通过而不是

Answer 1

尝试制作页脚position:fixed。

http://jsfiddle.net/QwJyp/

<强>更新

我离我更近了一点：http://jsfiddle.net/QwJyp/1/。也许有人可以建立起来。如果您删除定义了!important的行，则会显示带有height:100%的主要内容。但是在div的底部还有很多额外的填充，我无法弄清楚。当我有更多时间时，我会继续。祝好运！希望这有助于一些方向。

Answer 2

的想法是让#main使用padding-bottom x，容器min-height：100％，footer在容器之后和margin-top -x

Answer 3

在这里：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

修改

使用上面文章中的技术（测试 - 和在小提琴中工作）：

HTML 的

<html> <head> </head> <body> <div id='container'> <div id='main'> <div id='content'>Hello</div> </div> <div id='footer'> </div> </div> </body> </html>

CSS

html, body { margin: 0; padding: 0; height: 100%; } div#container,div#main { background-color: #333; } div#container { min-height:100%; width:960px; margin:0 auto; position:relative; } div#main { padding-bottom:90px; margin:0; padding:10px; } div#content { width:425px; } div#footer { position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF; }

Answer 4

尝试使用页脚div的绝对位置

<div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>

确保身高为100％

html,body
{   height:100%;
    padding:0;
    margin:0;
}
div#container {
    width:960px;
    margin:0 auto;
    position:relative;
    height:100%;
}
div#main {
    background-color:black;
    padding-bottom:90px;
}

div#content {
    width:425px;
}

div#footer {
    position:absolute;
    bottom:0;
    width:inherit;
    height:90px;
    width:960px;
}

Answer 5

我知道html的结构与你正在使用的不同，但也许你可以改变你的核心结构来模仿它（因为它起作用）：CSS Sticky Footer

看起来这个小组已经对这个主题做了很多研究，并且发现它是最好的（也许是唯一的？）方式......通过许多不同的版本。

CSS粘性页脚 - 永远不适合我

5 个答案: