Make An Element With Full Height (HTML/CSS)

I searched a lot and found lots of ways to doing this. but each of them some cons that i couldn't ignore. If you visited w3school website, I'm sure you'd notice the sidebar navigat

Solution 1:

Here is 2 structures where both are dynamic and fill the viewport height, the first use flex,

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0;
  background: white;
  padding: 10px;
}
main {
  flex: 1;
  display: flex;
}
aside {
  flex: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  flex: 1;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer {
  flex: 0;
  padding: 10px;
  background: white;
}

<header>Header</header>
<main>
  <aside>Aside</aside>
  <section>Section</section>
</main>
<footer>Footer</footer>

and the second use display: table

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
header div {
  height: 0;
  background: white;
  padding: 10px;
}
main {
  height: 100%;
}
aside {
  width: 0;
  padding: 10px;
  background: black;
  color: white;
}
section {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: gray;
}
footer div {
  height: 0;
  padding: 10px;
  background: white;
}

<header class="row">
  <div class="cell">
    Header
  </div>
</header>
<main class="row">
  <aside class="cell">Aside</aside>
  <section class="cell">Section</section>
</main>
<footer class="row">
    <div class="cell">
  Footer
  </div>
</footer>