Question

我已经查看了有关stackoverflow和其他网站的几个主题，但是所提出的解决方案似乎都不适用于我。

问题在于，无论我尝试过什么，我仍然在页面上添加一个滚动条，其高度与容器（包装器）div顶部的填充高度相同。我只能通过摆弄容器div上的最小高度来实现它，这显然不会一直有效，而且，这是一种非常草率的方式来处理它。这是代码。

HTML：

<body>
<div id="container">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>
</body>

（我已经尝试了内部和外部的页脚，结果相同。）

这是相关的CSS：

html, body {
    height: 100%;
}

body > #container {
    height: auto;
    min-height: 100%;
}


#content {
    height: 100%;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
    color: #FFF;
    background: /*image here*/;
    background-size: cover;
    overflow: auto;
}

#container {
    width: 100%;
    padding-top: 50px;
    position: relative;
}

#header {
    background: /*image here*/;
    height: 130px;
    box-shadow: 4px 2px 5px #000;

    border-top: 2px solid #F8F8F8;
    border-bottom: 2px solid #F8F8F8;

    overflow: hidden;
}

#footer {
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color: #FFF;
    clear: both;
}

可能会有一些奇怪的溢出，但是他们已经在尝试解决问题的不同点抛出它。我使用覆盖整个网站背景的背景图像，以及标题的背景图像。

任何摆弄溢出，高度，边距/填充或相对/绝对/固定定位的结果都会产生更糟糕的结果或相同的结果。

我试图在没有JS的情况下做到这一点，但如果一切都失败了，我愿意诉诸于此。如果是这样的话，有人会介意给我一个相关的JS stackoverflow问题和/或教程吗？

提前感谢任何建议。

Answer 1

您没有提供您尝试执行此操作的浏览器，但假设它是一个现代浏览器，我发现cleanstickyfooter技术效果最好。（所有这些技术都归功于Trevor Sheridan。）我创建了一个示例here on JSFiddle，以便您可以看到实现。您可以根据需要调整宽度等。第一个链接提供了很多很好的细节。

根据SO要求，这是HTML：

<body>
    <div id="wrapper">
        <div id="content_wrapper">
            <div id="content_inner_wrapper">
                <div>Site content will be contained here.</div>
            </div>
        </div>
    </div>
    <div id="footer_wrapper">
        <div id="footer_inner_wrapper">
            <div>The footer's content</div>
        </div>
    </div>
</body>

和CSS：

html, body {
    height: 100%;
}
body {
    margin: 0px;
    padding: 0px;
}
div#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
    width: 100%;
    height: 41px;
    background-color: red;
}
div#content_wrapper {
    width: 100%;
    padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
    min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
    width: 500px;
}

Sticky Footer CSS无效

1 个答案: