Нижний колонтитул плавает, если страница выходит за пределы нормальной высоты - PullRequest
Новая
       27

Нижний колонтитул плавает, если страница выходит за пределы нормальной высоты

0 голосов
/ 04 марта 2019

Я получаю эффект ниже.Синяя линия - нижний колонтитул.Когда DIV над нижним колонтитулом выдвигается по высоте, нижний колонтитул плавает и не распространяется на нижнюю часть экрана.

enter image description here

body,
html {
  margin: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  height: 100%;
}

.all_content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0082bb;
}

.home_body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #f0f0f0;
  align: center;
}

.footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0082bb;
}
<div class="all_content">

  <!-- header -->
  <div class="header"></div>

  <!-- home body -->
  <div class="home_body" align="center"></div>

  <!-- Footer -->
  <div class="footer"></div>

</div>

Причина, по которой я использую flex-grow для среднего DIV, заключается в том, чтобы нижний колонтитул находился внизу окна, даже если его немногосодержание.

1 Ответ

0 голосов
/ 05 марта 2019

Я не вижу плавающего эффекта, который вы описываете в вашем макете.

Но вот более чистая версия вашего кода.Надеюсь, это поможет. 

.all_content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 80px; /* flex-grow, flex-shrink, flex-basis */
  background: #0082bb;
}

.home_body {
  flex-grow: 1;
  background: #f0f0f0;
  overflow: auto;
}

.home_body > article {
  height: 2000px;
}

.footer {
  flex: 0 0 50px;
  background: #0082bb;
}

body,
html {
  margin: 0px;
  font-family: 'Roboto Condensed', sans-serif;
}
<div class="all_content">
  <div class="header"></div>
  <div class="home_body">
    <article></article>
  </div>
  <div class="footer"></div>
</div>
...