Как сделать контент высотою в окно браузера, но при этом не сжимать его при сворачивании окна браузера по вертикали?

Question

[Артем Прохоров]

<div id="app">
   
    <NavBar id="nav" :domain="domain" :auth="auth" :http="http" :getAccess="getAccess"></NavBar>

    <div id="wrapper-content">
      <Sidebar class='child1' :domain="domain" :auth="auth" :http="http"></Sidebar>
      <router-view class="child2" :domain="domain" :auth="auth" :http="http" style="overflow-x: auto"/>
    </div>

</div>

body {
   width: 100%;
}

#app {
   width: 100%;
}

#nav {
   width: 100%;
}

#wrapper-content {
   width: 100%;

   display: flex;
}

#wrapper-content.child1,  #wrapper-content.child2 {
   width: 50%
}

В body должен быть div#app, так как это vue.js, и при этом быть высотой равной body, но не сжиматься. #nav, #wrapper-content являются детьми #app. Они точно так же должны иметь высоту равной #app(даже если их контента не хватает для полного наполнения), но при этом они не должны сжиматься при изменении высоты окна браузера или открытии консоли разработчика.
Как этого добиться?

Comments

[Ankhena]

А теперь рассмотрим ситуацию: окно браузера развернуто на весь моник 4к или открыто с размером 500px по высоте.

И какой высоты должен быть #app?

[Артем Прохоров]

Ankhena, он всегда должен быть равен высоте экрана(любого экрана на котором открыт). Но не подстраиваться под изменения высоты в меньшую сторону. То есть в случаи уменьшения, контент должен не сжиматься, а пропадать снизу и если ты хочешь его увидеть, то просто проскроль вниз. Как то так.

[Ankhena]

kotcich,

он всегда должен быть равен высоте экрана(любого экрана на котором открыт).

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

window.screen.height даст вам высоту экрана

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

[Ankhena]

Как получить размеры экрана, окна и веб-страницы в...

Answer 1

[Иван Кулаков]

Ну min-height Вам нужен, судя по всему)
Через JS можно высчитать высоту контента и задать ее как min-height блоку с этим контентом)

UPD: То есть:

body, html, #app {
    height: 100vh;
    min-height: 300px;
}

let app = document.getElementById("app");

const appHeight = () => {
    app.style.minHeight = app.offsetHeight + 'px';
}

window.onload = appHeight;
window.onresize = appHeight;

Comments

[Ankhena]

Через JS можно высчитать высоту контента и задать ее как min-height блоку с этим контентом)

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

[Иван Кулаков]

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

[Ankhena]

Иван Кулаков, если бы окна...
Но даже если и окна, то для этого не нужно на js выяснять высоту контента.
Достаточно выяснить начальную высоту окна.
Но там речь про экран...

[Иван Кулаков]

Ankhena, только что проверил: речь про окно браузера)
Ну если не высчитывать высоту контента, то как тогда?) min-height: fit-content? Да только поддержка так себе)

[Ankhena]

Иван Кулаков,

[Ankhena]

Иван Кулаков, если речь про высоту окна (ну или скорее вьюпорта), то именно его и узнавать в px. И это значение задавать как min-height.

[Иван Кулаков]

Ankhena, 1. Очевидно же, автор имел ввиду "экран" - окно браузера, ну полно Вам))
2. Сейчас детально проанализировал все, и да, Вы правы) Достаточно будет просто блоку задать min-height: 100vh :)
Прошу прощения за спор)

[Ankhena]

Иван Кулаков, не, 100vh, вроде по условию не пройдёт, потому что при уменьшении окна браузера они изменяться. В смысле в перерасчете на px.

Я не очень понимаю разницу (для автора) между тем, что окно сразу открыто с небольшой высотой или уменьшилось в процессе.
Но автор пропал ((

[Ankhena]

Иван Кулаков, всё хорошо, в спорах рождается истина))
И вообще, это я влезла в ваш ответ ;)

[Иван Кулаков]

Ankhena, на счет истины - согласен) Я проверил подход со 100vh, вроде работает так как надо)

[Ankhena]

Иван Кулаков, да, это вообще самый адекватный вариант для верстки.