Flex CSS Блокировка нижнего содержимого

Question

интересно, если кто-нибудь может мне помочь.Я использую следующий код для отображения содержимого в div, однако всякий раз, когда я загружаю данные в DIV, они загружаются нормально, и появляется полоса прокрутки.Однако последний результат всегда отображается наполовину.
Если я добавлю проставку, как показано ниже, это устранит проблему, и я смогу прокрутить дальше последнего результата.

<div style="height:300px;"></div

Тем не менее, это не очень, поэтому мой вопрос - отображает ли: flex позволяет вам как-то добавить нижний буфер в 200 пикселей?Я прочитал https://css -tricks.com / snippets / css / a-guide-to-flexbox / , но не смог найти решение.

Полный код

.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  height: 600px;
  width: 100%;
  position: fixed;
  top: 92px;
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
  overflow: scroll;
}

<div class="headerbar">
  <div id="titlebar"></div>
</div>

<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>

Answer 1

Вы не должны делать все свои элементы position:fixed, что не логично, так как не будет прокрутки.Держите только фиксированный заголовок.

body {
 margin:0;
}
.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
  top:0;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  height: 600px;
  width: 100%;
  margin-top: 92px;
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
}

<div class="headerbar">
  <div id="titlebar"></div>
</div>

<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>

Answer 2

Ваш элемент заголовка (.headerbar) имеет дочерний элемент (#titlebar), установленный на height: 90px.Это устанавливает высоту заголовка.

Ваш основной элемент контента (#mainpage) установлен на height: 600px.Что ж, это приведет к переполнению экрана, когда область просмотра будет короче 690 пикселей.

Вместо height: 600px попробуйте height: calc(100vh - 90px).

Кроме того, установите overflow на родительском элементе, поэтомуполоса прокрутки активируется при переполнении дочернего элемента.

.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  /* height: 600px; */
  width: 100%;
  position: fixed;
  top: 92px;
    height: calc(100vh - 90px); /* new */
    overflow: auto;             /* new */
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
  /* overflow: scroll; */
}

body { margin: 0; }

<div class="headerbar">
  <div id="titlebar"></div>
</div>
<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>