How to extend a DIV to the end of the screen?

Question

Well I created a main div to hold all the elements of the page. Inside it I have 3 others divs: 1 menu bar, 1 sidebar, 1 content area.

HTML:

<div class="principal">
  <div class="barra_menu">
    Barra de menu
  </div>
  <div class="menu_lateral">
    <!--Como se estende esse div até o fim da página/elemento pai-->
    Menu lateral:<br>.<br>.<br>.
  </div>
  <div class="area_conteudo">
    Area de conteudo:<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
  </div>
</div>

CSS:

.principal{background-color:red;height:100%;}
.barra_menu{background-color:gray;widht:100%;}
.menu_lateral{background-color:blue;width:30%;float:left;}
.area_conteudo{background-color:green;width:70%;float:left;}

I want the side menu to extend from where it is to the bottom of the page, but I don’t know the solution.

I would like to get a solution based only on HTML/CSS preferably without using absolute positioning.

Following is a visual example of what I want to do: https://jsfiddle.net/m17wuaLc/2/

Answer 1

I recommend using the technique of Sticky Footer, if there is a need for compatibility with older browsers.

Your HTML structure would look like this:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
.side-left{
  float:left;
  width: 30%;
}
.content{
  float:left;
  width: 70%;
}

<div class="page-wrap">
  <div class="side-left">
    Menu
  </div>
  
  <div class="content">
    Content!
  </div>
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

Answer 2

You can use the property:

1vh (viewport height) = 1% of viewport height

will stay like this

min-height:100vh;

Answer 3

First you must give to the body one

height: 100%

And to your right-side menu, the same. It would look like this:

body{
   height: 100%
}
.menu_lateral{
   height: 100%;
}

The body has a standard height: auto

Because of this the body will extend to the size of the largest element. Giving a height: 100% this will be undone and it will have the screen size.