Question

我正在尝试创建具有固定菜单和页脚面板以及内部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>

Answer 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>

固定的菜单和页脚：固定高度的固定顶部/固定底部+内部div是否正确？

1 个答案: