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

发布于 12-05 20:10 字数 930 浏览 1 评论 0原文

我已经尝试让这项工作工作有一段时间了,但似乎从未成功。我认为这是因为我的 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 粘性页脚:

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 中只有 1 行文本。所以我想让 #main 区域一直延伸到页脚(位于页面底部),即使没有足够的内容来强制这种情况发生。有道理吗?

还有一件事。 #main 区域的背景颜色与正文不同。所以 #main 背景必须一直延伸到页脚,因为如果有间隙,主体颜色就会穿过

I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.

Here's my HTML:

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

And here would be my basic CSS, without implementation of 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;
}

To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?

And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

不羁少年2024-12-12 20:10:36

尝试将页脚设为position:fixed

http://jsfiddle.net/QwJyp/

更新

我有点更近:http://jsfiddle.net/QwJyp/1/。也许有人可以构建它。如果删除定义了 !important 的行,它会允许显示 height:100% 的 main 部分。但是 div 底部仍然有很多额外的填充,我无法弄清楚。稍后当我有更多时间时我会继续。祝你好运!希望这有助于一些方向。

Try making the footer position:fixed.

http://jsfiddle.net/QwJyp/

Update

I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.

﹎☆浅夏丿初晴2024-12-12 20:10:36

在这里: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;
}

Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

EDIT

Using the technique in the article above (tested - and works in fiddle):

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;
}
雨落□心尘2024-12-12 20:10:36

想法是让 #main 带有 padding-bottom x,容器最小高度:100%,页脚位于容器之后并带有 margin-top -x

idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x

傻比既视感2024-12-12 20:10:36

尝试使用页脚 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;
}

Try using with absolute position for the footer div

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

Make sure that body height is 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;
}
榆西2024-12-12 20:10:36

我知道 html 的结构与您正在使用的不同,但也许您可以更改核心结构来模仿它(因为它有效): CSS 粘性页脚

看起来这个小组已经对这个主题做了很多研究,并发现这是最好的(也许是唯一的?)方法。 ..通过许多不同的版本。

I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer

It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文