0

我查看了 stackoverflow 和其他网站上的几个主题，但没有一个提议的解决方案似乎对我有用。

问题是，无论我尝试了什么，我仍然在页面中添加了一个滚动条，该滚动条与容器（包装器）div 顶部的填充高度相同。我只能通过摆弄容器 div 上的 min-height 来使其工作，这显然并不总是有效，此外，这是一种非常草率的处理方式。这是代码。

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 问题和/或教程吗？

提前感谢您的任何建议。

4

1 回答 1

2

您没有提供您尝试在哪种浏览器中执行此操作，但假设它是现代浏览器，我发现cleanstickyfooter技术效果最好。（这项技术的所有功劳归功于 Trevor Sheridan。）我在 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;
}
于 2013-07-09T20:46:48.323 回答