Flexbox

Question

我不知道为什么这不起作用，这让我发疯。页脚不停留在网站的底部。在我的应用程序视图中，内容不再是视口中的页脚粘贴得很好，但是当内容较长时，页脚将停留在视口的底部而不是页面的底部。

我将位置设置为绝对位置，将底部设置为0。此外，我还将包含元素（即主体）设置为相对位置，以使页脚绝对位置相对于主体，但是它没有不管哪种方式都行。

这是代码（我已经分离了我的应用程序每个视图的页眉和页脚部分，但是好像它是一个文件一样工作）

CSS代码

body {
position: relative;}

.footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 50px;}

Answer 1

通过使用position: absolute;，您的页脚脱离了常规文档流程。布局没有任何空间，因此随着内容长度的增加，将会出现重叠。

您要解决的布局问题非常普遍，并且有经过实践检验的方法来解决。许多解决方案要求您知道页脚的高度，而这几乎是不实际的。例如，如果您知道页脚始终为100px，则只需在主体上设置padding-bottom即可添加必要的空间。

Flexbox

借助flexbox，有一种简单的方法不需要您知道页脚元素的高度。

HTML

<html>
    <body>
        <header role="banner">Site Header</header>
        <main>Content</main>
        <footer role="contentinfo">Footer</footer>
    </body>
</html>

CSS

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

header[role="banner"],
footer[role="contentinfo"] {
    flex: 0 0 auto;
}

main {
    flex: 1 1 auto;
}

通过告诉main占用flex容器（flex: 1 1 auto）中的所有剩余空间（body），您将把页脚推到页面底部

我的页脚没有停留在应有的位置

1 个答案:

Flexbox