时间戳

首页 > 解决方案 > 如何将页脚放在页面底部？

html - 如何将页脚放在页面底部？

问题描述

使用包含页脚的动态内容时，有时会出现页面上的内容不足以填充它的问题。页脚不是停留在我们希望它停留的页面底部，而是上升并在其下方留下一个空白区域。

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div class="container">
        <header></header>
        <main></main>
    </div>
    <footer>
        CopyRight
    </footer>
</div>
</body>
</html>

css

html, body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
    flex-grow: 1;
}

我的代码位于页面的垂直中心。

标签： htmlcss

解决方案

尝试绝对定位：

footer {
   position: absolute;
   bottom: 0;
}

这样，页脚将粘在页面的最底部。

推荐阅读