Является ли подход с фиксированным верхом / фиксированным дном + внутренним делителем с фиксированной высотой правильным подходом? - PullRequest
1 голос
/ 09 мая 2019

Я пытаюсь создать приложение в стиле stackoverflow с фиксированными панелями меню и нижнего колонтитула и внутренним элементом div, который создает прокрутку браузера (при необходимости).

Я просто хотел спросить, подходит ли следующий код для достиженияупомянутый сценарий?fixed-top / fixed-bottom - стили из Bootstrap4.Я вижу, что я должен использовать фиксированные константы в моем коде HTML / Style в моем подходе, все в порядке.

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

1 Ответ

1 голос
/ 27 мая 2019

Вместо использования класса 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...