固定高度的固定顶部/固定底部 + 内部 div 是正确的方法吗？答案

【问题标题】：Is fixed-top/fixed-bottom + inner div's with fixed height the right approach?固定高度的固定顶部/固定底部 + 内部 div 是正确的方法吗？
【发布时间】：2019-05-09 13:21:54
【问题描述】：

我正在尝试创建带有固定菜单和页脚面板以及创建浏览器滚动的内部 div（根据需要）的 stackoverflow 样式的应用程序。

我只是想问一下下面的代码是否正确地实现了上述场景？ fixed-top/fixed-bottom 是 Bootstrap4 中的样式。我看到我的方法中必须在我的 HTML/样式代码中使用固定常量，可以吗？

<body>
  <div>
    <div class="fixed-top" style="height: 50px; border: 2px solid black">
      Header
    </div>
    <div>
      <div style="height: 50px"></div>
      (1) The protection of natural persons in relation to the processing of personal data is a fundamental right. Article 8(1) of the Charter of Fundamental Rights of the European Union (the ‘Charter’) and Article 16(1) of the Treaty on the Functioning of
      the European Union (TFEU) provide that everyone has the right to the protection of personal data concerning him or her.
      <div style="height: 50px"></div>
    </div>
    <div class="fixed-bottom" style="height: 50px; border: 2px solid black">
      Footer
    </div>
  </div>
</body>

【问题讨论】：

请提供一些 CSS 来理解这个问题。

标签： html css bootstrap-4 fixed

【解决方案1】：

不要使用 Bootstrap 类，请使用下面的 css 页眉和页脚将具有固定的高度和绝对位置。

    html body {
        height: 100%;
        overflow: hidden;
      }
      html body .container-fluid.body-content {
        position: absolute;
        top: 50px;
        bottom: 30px;
        right: 0;
        left: 0;
        overflow-y: auto;
      }
      fixed-header {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          background-color: #4C4;
          height: 50px;
      }
      fixed-bottom {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #4C4;
          height: 30px;
      }

 <div class="fixed-header">
      Header
    </div>
    <div class="container-fluid body-content">
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
      Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
    </div>
    <div class="fixed-bottom">
      Footer
    </div>

【讨论】：