Question

我试图将页脚推到页面底部，无论页面上的内容有多少或多少。我的大多数页面都没有问题，但内容较少的页面在页面中间有一个浮动页脚。即使我有

html,body{height:100%}

时，内容部分无法获得高度

#content{height:100%}

已设定。我搞砸了

clear:both
overflow:hidden
#content:after{}

无济于事。

<html>
<body>
<header>
    <h1>Header Name</h1>
</header>

<section id="content">
        <p>Temp Text</p>
</section>

<section id="footer">
    <footer>
        <p>All rights reserved</p>
    </footer>
</section>
</body>
</html>

编辑：使用viewport-height（vh）单位让我扩展内容部分的高度，但受上面标题的影响。因此，如果我的视口为900px且带有200px标题，则我的页脚将被推到视口下方200px。

Answer 1

<强> CSS

#content{
  min-height: 100vh;
}

这是工作Demo

无论内容的大小如何，这都将始终提供完整view-height的最小高度

编辑（如果内容很小，可以在不滚动的情况下显示页脚）

body{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
#content{
	flex: 1;
}

<section id="content">
        <p>Temp Text</p>
</section>

<section id="footer">
    <footer>
        <p>All rights reserved</p>
    </footer>
</section>

以下是编辑Demo

如果内容很小，则页脚将驻留在view-port 的底部。如果内容大于屏幕高度，那么页脚将会关闭

将内容高度设置为身高的100％

1 个答案: