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

【问题标题】：Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container设置 Flexbox 最小高度以填充滚动容器中的剩余屏幕
【发布时间】：2020-03-02 13:20:36
【问题描述】：

我对 Flex-box 比较熟悉，但这个问题让我很困惑：

我正在尝试创建一个弹性框布局：

如果内容短于屏幕（视口），则在屏幕底部放置页脚
如果内容长于屏幕（视口），则将页脚放在滚动内容的末尾

我似乎可以得到一个或另一个，但不能同时使用这两种方法。几个目标：

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

Codesandbox Demo of Issue

感谢您的帮助

【问题讨论】：

这是您需要的吗？ codesandbox.io/s/…如果是这样，我会在下面解释。
好的。下面完成。我还更改了 #scrollingSegment 的背景颜色，只是为了让它看起来更好看。
我之前将此问题标记为已回答 - 但刚刚意识到问题仍然存在。到目前为止，使用建议的解决方案，标题不再是固定的（这是一个要求）。这仍然是一个悬而未决的问题。为错误的开始道歉@awais。我已经更新了问题，以提高对此的清晰度
@arhnee 抱歉之前没有包括在内，我用固定的动态标题更新了我的 ans，请看一下 :)
@Awais - 完美，谢谢！我刚刚将您的回复标记为答案。为了大家的利益，这里有一个包含完整工作解决方案的代码框：codesandbox.io/embed/…

标签： javascript html css reactjs flexbox

【解决方案1】：

将min-height 设置为100vh 的#wrapper 喜欢

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

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

body{
 margin: 0;
}

对于根据 OP 要求的粘性标题请添加这些样式以及我提到的上述样式（我只是删除高度，因为你说标题是动态高度）

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

所以您需要放入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;
}

【讨论】：

你在他的 Codesandbox Demo 上试过了吗？它不起作用，单击“显示长内容！”按钮时会破坏布局
@andergtk 是的，我尝试将这些样式设置在 demo.css body { background-color: #444; margin: 0; } #wrapper { display: flex; flex-direction: column; min-height: 100vh; } 的顶部
@andergtk 为了让我们俩更清楚，你能不能用上面的更新你demo.css，这样我们都可以看到发生了什么
我的错误，我使用了height 属性而不是min-height。您的答案与正文中的margin: 0 完美结合

【解决方案2】：

您是否只想滚动内容？仅更改这些 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;
}

【讨论】：

【解决方案3】：

body {
  background-color: #444;
  position: relative;
  margin: 0;
  min-height: 100vh
}

#footer {
  background-color: red;
  height: 64px;
  width:100%;
  left: 0;
  position:  absolute;
  bottom:0;
}

【讨论】：

【解决方案4】：

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

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

总之，我补充说：

CSS

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

多伦多证券交易所

<div className="spacer" />

一个完整的例子可以找到here

【讨论】：