Как правильно задать высоту блока когда между верх и ниж. контентом большое расстояние?

Question

[Alex Polyakh]

Проблема состоит вот в чем, у меня есть верхний контент и нижний, между нижним и верхним присутствует большое расстояние. После того как я задал родителю фикс. высоту в px получил эффект который хотел, но когда складываю на меньшее разрешение получается очень не красиво. Помогите пожалуйста решить проблему без жесткой привязки к высоте в px

Answer 1

[Дмитрий Шведов]

Как тебе такой вариант?

К левому блоку

.navigation {
    background: #31475E;
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 250px;
}

К правому блоку

.page {
    padding-left: 250px;
}

В левом блоке делаем footer

.footer {
    bottom: 0;
    position: absolute;
}

Comments

[Alex Polyakh]

Дмитрий, спасибо Вам!

[Дмитрий Шведов]

Не за что, рад был помочь :)

Answer 2

[Ankhena]

display: flex; для родительского блока
можно еще и с заменой направления главной оси и justify-content: spact-between

Answer 3

[neopolitan]

Может не используете media запросы ?

Answer 4

[Денис]

Александр Полях внесенное вами дополнение к вопросу, лично для меня, не на много внесло ясности. Попробую ванговать. Высоту можно задать с помощью такой единицы измерения, как "vh". К примеру, если высоту элемента нужно сделать соответствующей высоте видимой части браузера, то мы бы записали:

div {
    height: 100vh;
}

Единственный минус - это то, что эта единица измерения (как и vw, vmin, vmax) не поддерживаются ослами ниже 11-ой версии

Answer 5

[gleendo]

Сделать так как в моей демке codepen.io/evg_/pen/RRozLj
+ media запросы