0

我试图让我的页脚位于页面底部，页面顶部的标题和页面中间的部分。但我得到的只是页面顶部显示的红色页脚。背景包装应该是灰色的，但这也不起作用。请帮忙。谢谢你。

这是CSS：

body {
    margin: 0 auto;
}
#wrapper {
    position: relative;
    background-color: gray;
    height: 100%;
    width: 100%;
}
header {
    position: absolute;
    top:0;
    width: 100%;
    height: 20px;
    background-color: red;
}
section {
    position: absolute;
    width: 100%;
    height: 100px;
    margin-top: auto;
    margin-bottom: auto;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background-color: blue;
}

下面是html的正文：

<body>

    <div id="wrapper">

        <header>

        </header>
        <section>

        </section>
        <footer>

        </footer>

    </div>

</body>

4

5 回答 5

1

只需将其添加到 html/body 中：

html, body {
    height: 100%;
}
于 2013-08-12T12:58:00.327 回答
1

您应该必须使用position: absolute;. 当在这样的父元素中使用时，它往往会弄乱你的所有间距。该section部分将被放置在该header部分的正上方，因为它根本没有被定位。

尝试只给出section最小高度并删除position属性。

希望这可以帮助。

于 2013-08-12T13:08:14.100 回答
0

你很亲密。替换 CSS 定义<body>：

html, body{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
于 2013-08-12T12:55:14.997 回答
0

从页眉、页脚和部分中删除绝对位置。我想可能是这样。

于 2013-08-12T13:55:58.857 回答
0

在您的代码中的以下类中进行此操作：

html {
    height: 100%;
}

body{
    margin: 0 auto;
    height: 100%;
}

section{
    position: absolute;
    width: 100%;
    height: 100px;
    top:20px;
}

演示

于 2013-08-12T12:56:13.980 回答