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;
}
headerdiv {
  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;
}
footerdiv {
  height: 0;
  padding: 10px;
  background: white;
}

<headerclass="row"><divclass="cell">
    Header
  </div></header><mainclass="row"><asideclass="cell">Aside</aside><sectionclass="cell">Section</section></main><footerclass="row"><divclass="cell">
  Footer
  </div></footer>