How to make divs with the same height and 100% height

You can reproduce this functionality with a bit of CSS and JavaScript.

First the HTML:

<!-- O nome das classes já explica o que cada elemento representa -->
<div class="menu"></div>
<div class="toggle"></div>
<div class="conteudo"></div>

CSS Code:

body{
    padding-left:230px;
}
body.expandido{
    padding-left:30px;
}
.menu, .toggle{
    position:fixed;
    height:100%;
    left:0;
    top:0;
}
.menu{
    width:200px;
    background:#555;
}
.toggle{
    width:30px;
    background:#ccc;
    left:200px;
}
.conteudo{
    padding:10px;
}
.sumido{
    margin-left:-200px;
}

And finally a little JavaScript (jQuery):

$('.toggle').on('click',function(){
    var toggle_menu = $('.toggle, .menu'),
        body = $('body');

    if(!$(this).hasClass('sumido')){
        toggle_menu.addClass('sumido');
        body.addClass('expandido');
    }else{
        toggle_menu.removeClass('sumido');
        body.removeClass('expandido');
    }
});

How does it work?

What we did above was to fix the .menu element and the .toggle element in the page layout, so that with scrolling they do not add up. In addition, we assign a padding to the body element to push all of its content to the right, so that content is not overlaid by the menu.

And the JavaScript code does nothing more than swap CSS classes to change the position of these elements.

Exemplo

From the description and the images it seems to me that you intend to create a dashboard .

Not that it can not be done from scratch, but there is no need to reinvent the wheel when there are solutions ready and compatible with various browsers such as Bootstrap.

Of the many existing possibilities, a very good one would be this .

You can get the browser height via jQuery or JavaScript and declare a CSS for these divs at that height. Example with jQuery:

var altura = $(window).height();
$('.alvo').css('height', altura);