时间戳

首页 > 解决方案 > Flexbox 页脚不堆叠在其他 div 下

html - Flexbox 页脚不堆叠在其他 div 下

问题描述

我使用 css 和 Flexbox 创建了一个布局，问题是页脚 div 在加载时显示在页面底部，但内容会跳过它，所以当你滚动页脚时，页脚只是浮动在页面中间。我不确定要改变什么。

我已将页脚更改为粘性，底部更改为 0px。它有点适用于调整其他 div 的边距，但它不是很干净。我希望继续使用 flexbox 属性并将它们堆叠起来，但这似乎不起作用？我还调整了其他 div 的最小-最大高度，但是一旦窗口缩小到最小高度，页脚就会浮在其余内容上。

链接到代码JSFiddle

.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}

我怀疑页脚会遵守堆叠顺序并仅显示在其余内容下，就像主体在页眉下一样。

标签： htmlcssflexbox

解决方案

这是在“.content”类上设置的高度。更改height: calc(100vh - 100px)为min-height: calc(100vh - 100px)

除非您希望页脚和页眉始终可见，否则您只需添加overflow: auto即可使内容滚动

推荐阅读