Question

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

这是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>

Answer 1

只需将其添加到html / body：

html, body {
    height: 100%;
}

Answer 2

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

尝试仅提供section最小高度并删除position属性。

希望这有帮助。

Answer 3

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

html, body{
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

Answer 4

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

html {
    height: 100%;
}

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

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

<强> DEMO

Answer 5

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

如何修复我的CSS定位

5 个答案: