Html 我的页脚不'；不要呆在它应该呆的地方_Html_Css

Html 我的页脚不'；不要呆在它应该呆的地方

html css

Html 我的页脚不'；不要呆在它应该呆的地方,html,css,Html,Css,我不知道为什么这不起作用，这让我发疯。页脚未粘贴到网站底部。在“我的应用”的视图中，当内容不再位于视口中时，页脚会很好地粘住，但当内容较长时，页脚会停留在视口的底部，而不是页面的底部我已将位置设置为绝对，底部设置为0。此外，我还将包含元素（即主体）设置为相对位置，以便页脚绝对位置相对于主体，但这两种方式都不起作用下面是代码（我已经分离了我的应用程序的每个视图的页眉和页脚部分，但它的工作原理就像它是一个文件一样） CSS代码 body { position: relative;} .foot

我不知道为什么这不起作用，这让我发疯。页脚未粘贴到网站底部。在“我的应用”的视图中，当内容不再位于视口中时，页脚会很好地粘住，但当内容较长时，页脚会停留在视口的底部，而不是页面的底部

我已将位置设置为绝对，底部设置为0。此外，我还将包含元素（即主体）设置为相对位置，以便页脚绝对位置相对于主体，但这两种方式都不起作用

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

CSS代码

body {
position: relative;}

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

使用

位置：绝对位置，您已将页脚从正常文档流中删除。布局没有为它留下任何空间，因此随着内容长度的增加，将出现重叠
您试图解决的布局问题非常常见，有很多经过尝试和测试的解决方法。许多解决方案都要求您知道页脚的高度，这几乎不实用。例如，如果您知道页脚总是100px，您可以简单地在正文上设置填充底部，以便添加必要的空间
柔性箱
多亏了flexbox，才有了一种简单的方法，不需要知道页脚元素的高度
HTML
<html>
    <body>
        <header role="banner">Site Header</header>
        <main>Content</main>
        <footer role="contentinfo">Footer</footer>
    </body>
</html>

通过告诉main
占据flex容器（body
）中所有剩余空间（flex:1 auto
），您将把页脚推到页面底部
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;
}