设置Flexbox最小高度以填充滚动容器中的剩余屏幕 [英] Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container

问题描述

我对Flex-box相当熟悉，但是这个问题使我感到困惑:

I am moderately familiar with Flex-box, but this issue has me baffled:

我正在尝试创建一个弹性框布局，该布局:

I am trying to create a flex-box layout that:

1. 如果内容比屏幕(视口)短，则在屏幕底部放置页脚
2. 如果内容比屏幕(视口)长，请在滚动内容的末尾放置页脚

我似乎可以选择其中一个，但不能同时使用这两个.有两个目标:

I can seem to get one, or the other, but not both of these to work. A couple of goals:

• 如果可能的话，仅在CSS中实现这一目标
• 标题应保持固定在屏幕顶部，而内容具有可滚动的溢出
• 标题栏的大小将有所不同，因此解决方案应适应 这个

• Achieve this, if possible, in CSS alone
• The header should remain fixed at the top of the screen, while the content has scrollable overflow
• The header bar will vary in size, so the solution should accommodate this

Codesandbox发行演示

感谢您的帮助

推荐答案

将min-height设置为#wrapper的100vh，例如

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

并且阿尔卑斯山，您需要将body的margin设置为0以避免滚动

And alps you need to set margin of body to 0 to avoid scroll

body{
 margin: 0;
}

对于符合OP要求的粘性标头，请添加上述样式以及我提到的上述样式(我只是删除了高度，因为您说标头具有动态高度)

For sticky header as per OP Requirement Please add theses styles along with the above one i mentioned (i just remove height as you said header is of dynamic height)

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

因此，您需要放入demo.css的最终样式如下

So the final Styles you need to put inside demo.css are as below

body {
  background-color: #444;
  margin: 0;}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

这篇关于设置Flexbox最小高度以填充滚动容器中的剩余屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！