Javascript 设置Flexbox最小高度以填充滚动容器中的剩余屏幕

我对Flex box相当熟悉，但这个问题让我感到困惑：

我正在尝试创建一个flex box布局：

如果内容比屏幕短，则在屏幕底部放置页脚（查看端口）

如果内容比屏幕长，则将页脚放在滚动内容的末尾（查看端口）

我似乎可以让一个或另一个，但这两个都不起作用。有几个目标：

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

---

感谢您的帮助

将

包装器的
最小高度
设置为
100vh

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

您需要将
body
的
margin
设置为
0
，以避免滚动

body{
 margin: 0;
}

对于符合OP要求的粘性页眉，请将这些样式与我提到的上述样式一起添加（我只是删除了高度，因为您说页眉是动态高度的）

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

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;
}

将
包装器的
最小高度设置为
100vh
，如

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

您需要将
body
的
margin
设置为
0
，以避免滚动

body{
 margin: 0;
}

对于符合OP要求的粘性页眉，请将这些样式与我提到的上述样式一起添加（我只是删除了高度，因为您说页眉是动态高度的）

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

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;
}

您想只滚动内容吗？。仅更改这些css

#mainContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
  height:100vh;
 }

#footer {
  background-color: red;
  height: 64px;
  position:fixed;
  bottom:0;
}

您想只滚动内容吗？。仅更改这些css

#mainContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
  height:100vh;
 }

#footer {
  background-color: red;
  height: 64px;
  position:fixed;
  bottom:0;
}

当我们希望页脚位于屏幕底部时，有一个解决方案，即使flexbox包装的内容短于屏幕的高度

解决方案是在fotter的正上方创建一个div（我们可以称之为spacer），并给它一个css属性
flex:1
（这是flex-grow:1、flex-shrink:1和flex-basis:0的快捷方式）。若你们仔细想想，我们想要的是让我们的div间隔区随着内容的增长或收缩

总之，我补充说：

CSS

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

TSX

<div className="spacer" />



可以找到一个完整的示例
当我们希望页脚位于屏幕底部时，即使flexbox包装的内容短于屏幕的高度，也有一个解决方案

解决方案是在fotter的正上方创建一个div（我们可以称之为spacer），并给它一个css属性
flex:1
（这是flex-grow:1、flex-shrink:1和flex-basis:0的快捷方式）。若你们仔细想想，我们想要的是让我们的div间隔区随着内容的增长或收缩

总之，我补充说：

CSS

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

TSX

<div className="spacer" />



可以找到一个完整的示例
您在他的Codesandbox演示中尝试过吗？它不起作用，当“显示长内容！”按钮打开时会破坏布局clicked@andergtk是的，我尝试在demo.css
body{背景色：#444；边距：0；}#包装{显示：flex；flex方向：column；最小高度：100vh；}中设置这些样式
@andergtk为了让我们双方都更清楚，你能用上面的一个更新你的
demo.css
，这样我们都能看到发生了什么错误吗？我用了
height
属性来代替
minheight
。你的答案在加上
margin:0
body时效果非常好。你在他的Codesandbox演示中试过吗？它不起作用，当“显示长内容！”按钮打开时会破坏布局clicked@andergtk是的，我尝试在demo.css
body{背景色：#444；边距：0；}#包装{显示：flex；flex方向：column；最小高度：100vh；}中设置这些样式
@andergtk为了让我们双方都更清楚，你能用上面的一个更新你的
demo.css
，这样我们都能看到发生了什么错误吗？我用了
height
属性来代替
minheight
。您的答案在正文上加上
margin:0
非常有效这就是您需要的吗？如果是的话，我会在下面解释。完成如下。我还更改了#scrollingSegment的背景色，只是为了让它看起来更漂亮。我之前将这个问题标记为已回答，但刚刚意识到问题仍然存在。到目前为止，对于建议的解决方案，标题不再是固定的（这是一项要求）。这仍然是一个悬而未决的问题。为错误的开始向@awais道歉。我已经更新了问题，以增加问题的清晰度this@arhnee很抱歉之前没有包括这些内容，我用固定动态标题更新了我的ans。请看：）@Awais-完美，谢谢！我刚刚把你的答复标为答案。为了每个人的利益，这里有一个包含完整工作解决方案的codesandbox：这是您需要的吗？如果是的话，我会在下面解释。完成如下。我还更改了#scrollingSegment的背景色，只是为了让它看起来更漂亮。我之前将这个问题标记为已回答，但刚刚意识到问题仍然存在。到目前为止，对于建议的解决方案，标题不再是固定的（这是一项要求）。这仍然是一个悬而未决的问题。为错误的开始向@awais道歉。我已经更新了问题，以增加问题的清晰度this@arhnee很抱歉之前没有包括这些内容，我用固定动态标题更新了我的ans。请看：）@Awais-完美，谢谢！我刚刚把你的答复标为答案。为了每个人的利益，这里有一个包含完整工作解决方案的codesandbox：