具有固定高度状态栏的100％高度内容的适当CSS

Question

我正在修改多年前构建的内部网页，我正在尝试找出最有效的CSS来正确布局具有以下要求的页面：

1. 页面应占据视口的整个高度和宽度，并应响应调整大小。
2. 应该有一个状态栏，它应该始终在底部可见，并且应该只与其内容一样高。
3. 如果用户增加字体大小，则应正确调整状态栏，以便不会切断文本。
4. 如果内容高于可用屏幕高度，则滚动条应显示在内容区域中以允许其滚动（再次，保持状态栏可见）。

这是预期结果的模型：



就浏览器要求而言，只有非常特定的一组用户才会看到这一点，这些用户将通过Internet Explorer 11访问它。没有Chrome，没有Firefox，没有Edge - 除了IE 11之外什么都没有。

我一直在尝试“100vh”的高度和弹性，我想我已经接近了但是我只是遇到了我想要的一切。我目前的尝试看起来像这样：

    body {
      height: 96vh;
      min-height: 96vh;
      width: 95vw;
      min-width: 95vw;
      display: flex;
      flex-direction: column;
    }
    
    #content
    {
      padding: 20px;
      max-height: 95vh;
      overflow:auto;
      flex: 1 0 0;
    }
    
    #statusbar
    {
      background-color: #000;
      color: #fff;
      padding: 20px;
    }

    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
    </div>
    <footer id="statusbar">Status bar</footer>

我感谢所提供的任何帮助！提前谢谢！

Answer 1

这是一个使用display:flex的解决方案，其中页脚具有可变高度，内容会相应调整。内容区域设置为overflow:auto，以便在必要时滚动。

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.footer {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
  overflow:auto;
}

<div class="box">
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      some overflowing text
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (variable height)</p>
  </div>
</div>