Дочерний div внутри родителя на всю высоту экрана , не больше не меньше. Но без 100vh

Question

Прошу помощи. Вначале код

html, body {
width: 100%; 
height: 100%;
margin: 0;
padding: 0;
background: #cccccc;
}

.container {
background: green;	
height: 100%;
}

header {
z-index: 1;
position: fixed; top: 0; left: 0; height: 48px; width: 100%;
background: red
}

.data {
display: flex;
color: #fff;
background: black;
min-height: 100%;
}

main {
position: relative;
min-height: 100%;
background: cyan;
flex-grow: 1;
}

.nav {
width: 100%;
background: lightgreen;
}

.content {
background: #10d1a6;
width: 100%;
}

aside {
background: yellow;
width: 200px;
}

footer {
background: magenta;
z-index: 1;
}

<body>

<div class="container">	

	<header>Хедер</header>
	
	<div class="data">

		<main>
			
			<div class="nav">Навигатор</div>
			
			<div class="content">
				Начало<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
				1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>Конец
			</div>	
			
		</main>
	
		<aside>Боковина</aside>
	</div>

	<footer>Футер</footer>
	
</div>

</body>

Что мне необходимо. Есть шапка header, центральный блок .data вида flex с двумя дочками лево-право main и aside и footer. Внутри main мне надо разместить два блока друг над другом - .nav и .content. Условие: блок nav должен быть на всю высоту экрана, сразу после него начинается .content произвольной высоты. Проблема в том, что нав совсем не хочет слушаться, когда его нет, все хорошо, задуманная блочность соблюдается, как я его вставляю - если его height: 100% он, при наличии контента улетает вниз до самого футера, выталкивая контент вне, min-height: 100% - его вообще нет. Крайне хочу сделать его без 100vh - ибо с ним геммор с мобильными браузерами начинается, кто то учитывает панель, кто то не учитывает, в общем, 100% высоты по олдскульному хочу, это все понимают одинаково.

Answer 1

Вероятно, красивого способа это сделать исключительно при помощи CSS не существует. С другой стороны, припоминаю новость, что вроде бы в Хроме это пофиксили и теперь все мобильные браузеры 100vh воспринимают одинаково. В общем, сперва рекомендую проверить по этой странице корректность работы, прежде чем приступать к сложным решениям.

Если же сложные решения очень хочется применить, то можно это сделать примерно так:

1) добавить css property --vh-custom; добавить стиль .nav { height: calc(var(--vh-custom) * 100) };

2) добавить скрипт, который будет при загрузке и ресайзе считать window.innerHeight / 100 и обновлять значение переменной --vh-custom через setProperty.

Answer 2

Так?

const root = document.querySelector(':root');

function calcHeight() {
  const heightWindow = window.innerHeight;
  root.style.setProperty('--myVh', heightWindow/100 + 'px');
}

calcHeight();

window.addEventListener('resize', calcHeight);

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.container {
  padding: 0 30px;
  max-width: 1000px;
  margin: 0 auto;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header,
footer {
  color: white;
  background-color: black;
  padding: 10px 0;
}

main {
  background-color: rgba(255, 135, 135, 1);
  flex: 1;
}

nav {
  min-height: calc( var(--myVh) * 100 );
  background-color: pink;
}

<header>
  <div class="container">Header</div>
</header>
<main>
  <div class="container">
    <nav>Nav</nav>
  </div>
</main>
<footer>
  <div class="container">Footer</div>
</footer>

БЛОГ НА HUSL

Дочерний div внутри родителя на всю высоту экрана , не больше не меньше. Но без 100vh

Ответы (2 шт):