Как растянуть grid блок на весь экран?

Question

body {
  display: grid;
  grid-template-areas: "header header" "nav article ";
  grid-template-columns: 200px 1fr;
  margin: 0;
}

header,
footer,
article,
nav,
div {
  padding: 20px;
  background: gold;
}

#pageHeader {
  grid-area: header;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>

Как сделать чтобы nav и article автоматически растягивались на оставшуюся высоту окна?

Answer 1

body, html {
height:100%;
}
body {
  display: grid;
  grid-template-areas: "header header" "nav article ";
  grid-template-columns: 200px 1fr;
  margin: 0;
}

header,
footer,
article,
nav,
div {
  padding: 20px;
  
}

#pageHeader {
  grid-area: header;
  background: gold;
}

#mainArticle {
  grid-area: article;
  background: blue;
}

#mainNav {
  grid-area: nav;
  background: green;
}

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>

БЛОГ НА HUSL

Как растянуть grid блок на весь экран?

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