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

问题描述

我正在尝试使用固定的菜单和页脚面板以及创建浏览器滚动的内部 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>

标签： htmlcssbootstrap-4fixed

不要使用 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>

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

问题描述

解决方案

推荐阅读