Create an element with full height (HTML / CSS)

Question

I searched a lot and found many ways to do this. but each of them has a few minus that I could not ignore.

If you visited the w3school website , I'm sure you noticed the sidebar navigator in left. I like it and wanted to create something like this.

Although at first glance it is quite simple, but it is not!

With a nice trick, I did something like this:

  * {
  box-sizing: border-box;
  }
  body {
      font-size: 35px;
      padding: 0;
      margin: 0;
      display: block;
  }
  .container {
      overflow: hidden;
      background: #eee;
  }
  .row {
      position: relative;
      background-color: #555;
      left: 25%;
  }
  .row::after {
      content: "";
      clear: both;
      display: block;
  }
  header, footer {
      text-align: left;
      padding: 30px;
      margin: 0;
  }

  header h1 {
      margin: 0;
      padding: 0;
  }
  nav {
      position: relative;
      /*position: fixed;*/
      overflow-y: scroll;
      top: 0;
      right: 25%;
      height: 100%;
      /*background-color: #eee;*/
  }
  ul {
      /*overflow: scroll;*/
  }
  section{
      position: relative;
      padding: 0 80px;
      right: 25%;
  }
  .col-3 {width: 25%;float: left;}
  .col-9 {width: 75%;float: left;}

<header><h1>HELL!<h1></header>
	<div class="container">
		<div class="row">
			<nav class="col-3">
				<ul>
					<li>first</li>
					<li>second</li>
					<li>third</li>
					
				</ul>
			</nav>
			<section class="col-9">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
			</p></section>
		</div>
	</div>
	<footer><h3>HELL!<h3></footer>

Run code

But, as you can see, the scrollbar in the navigation list still matches the size of its contents and that there is a problem with this method.

The Faux Column method is cool, but I don’t like using images in my design.

, , .

(, , JavaScript - . CSS)

, -, (- w3school). .

.

Answer 1

, , 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>

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>