CSS Flexbox - плавающий нижний колонтитул переменной высоты с прокручиваемым содержимым - PullRequest
Новая
       21

CSS Flexbox - плавающий нижний колонтитул переменной высоты с прокручиваемым содержимым

0 голосов
/ 19 октября 2018

Я пытаюсь сделать фиксированный «плавающий» нижний колонтитул с переменной высотой, который всегда отображается внизу, даже когда содержимое изменяется.

У меня есть следующее Создать приложение React HTML: 

<html>
  <body>
    <div id="root">
      <div class="app">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"><div>
      </div>
    </div>
  </body>
</html>

И следующий CSS: (Согласно второму ответу на Исправлен заголовок, нижний колонтитул с прокруткойcontent ) 

html, body, #root {
  height: 100%
}

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
}

.header {
  flex-shrink: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}

Однако при динамическом изменении содержимого страница искажается, а элементы перекрывают друг друга.Я обнаружил, что установка #root с помощью height: 275% позволяет правильно отображать страницу в развернутом состоянии (и только затем).

Установка #root с помощью min-height: 100% делает нижний колонтитул в серединестраница, когда не хватает контента, и она больше не плавает, когда контент прокручивается.

1 Ответ

0 голосов
/ 19 октября 2018

Я думаю, что это то, что вы пытаетесь достичь https://codepen.io/anon/pen/bmMrOg

<div id="root">
  <div class="app">
    <div class="header">
      header
    </div>
    <div class="content">
      <div>content</div>

    </div>
    <div class="footer">
      footer
      <div>
  </div>
</div>

И CSS 

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

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  background: blue;
}

.content {
  overflow: auto;
  flex-grow: 1;
  background: red;
}

.footer {
  flex-shrink: 0;
  background:green;
}
...