Добавьте DIV, который занимает все доступное вертикальное пространство

Question

У меня есть пустая страница с одним DIV:

<div style="height: 20%;
            min-height: 10px;
            max-height: 100px;
            width: 100%;
            background-color: blue;"></div>

Я хочу добавить DIV после этого, который займет все оставшееся вертикальное пространство на странице. Как мне это сделать?

Я потратил на это целый день, и CSS начинает сводить меня с ума.

Answer 1

Предполагая, что у вас есть два div:

<div id='one'></div>
<div id='two'></div>

, где #one имеет переменную высоту и #two должен использовать все оставшееся пространство по вертикали, которое вы можете сделать:

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#one {
  flex: none;
}
#two {
  flex: 1;
}

Кроме того, если выЕсли вы хотите, чтобы #two можно было прокручивать, вы можете добавить:

height: 100%;
overflow-y: scroll;

, что позволит ему выполнять вертикальную прокрутку, чтобы показать все содержимое.

Подробнее о дисплее можно прочитать здесь: flex здесь.

Answer 2

Что должно быть внутри этого div?

Если это просто цветной заполнитель, просто поместите свой синий div в другой div, который задает цвет фона, и он должен соответствовать 100% окна вашего браузера?как 2 деления ниже друг друга.Если вам нужен контент, вы всегда можете просто поставить другой div под свой синий с любым контентом, который вы хотите.

РЕДАКТИРОВАТЬ: пример кода: http://jsbin.com/efefe/2