需要帮助让 div 扩展到浏览器窗口的全高，同时保持 justify-content 设置答案

【问题标题】：Need help getting div to expand to full height of browser window while maintainging justify-content setting需要帮助让 div 扩展到浏览器窗口的全高，同时保持 justify-content 设置
【发布时间】：2020-10-27 01:31:01
【问题描述】：

我知道我遗漏了一些简单的东西，但我不知道如何让我的 div 布局正确显示。下面是我遇到的一个示例。我正在反应中构建它，但这只是 DIV/CSS 布局问题。

<div style={{display:'flex', flexDirection:'column', height:'100vh', border:'1px solid black'}}>
    <div style={{border:'1px solid red'}}>Top bar 1</div>
    <div style={{display:'flex', flexDirection:'row'}}>
  <div style={{border:'1px solid black', display:'flex',flexDirection:'column',height:'100%', justifyContent:'space-between'}}>
    <div style={{height:'100%', border:'1px solid green', width:'200px', overflow:'auto'}}>
      LEFT NAV BAR
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
      <span>Test datarow </span><p/>
    </div>
    <div style={{height:'30px',border:'1px solid cyan'}}>Stay on Bottom</div>
  </div>
  <div>
    MAIN CONTENT OF PAGE
  </div>
  </div>
  </div>

这就是它的样子：当内容被添加到左侧绿色导航栏时，溢出设置似乎不起作用，它会导致整个浏览器有滚动条。我只希望滚动条位于绿色 Div 中，而左侧导航的其余部分调整为窗口高度。

我怎样才能得到这种行为？我一定是遗漏了一些简单的东西，我只是看不到它。

更新：我对这一行做了一个小改动，并添加了“height=100%”

起初这似乎解决了这个问题，但是当 topbar div 有更多内容时，问题就出现了。如果我在顶部导航 div 中添加了一些换行符，它会再次中断并且无法正确滚动内容。

顶栏 1 顶栏 2

【问题讨论】：

标签： html css reactjs

【解决方案1】：

将heigth:100vh 添加到所有这些组件的父级，然后使用% 使此父级的每个组件的顶部栏/内容/底部高度相对于父级：

.content{ max-height:80%; overflow-y:auto }

如果您要从 px 和 % 计算高度，请使用：calc(30px - 100%)

【讨论】：