How to make Divs with same height and 100% height

Question

I need the three Ivs I have to be the same height, and in case the height isn’t 100%, turn 100%. Example: I have 3 Ivs

<div class="menuEsquerdo"></div>

<div class="toggle"></div>

<div class="conteúdo"></div>

When toggle is clicked the menu is decreased. The menuEsquerdo needs to be fixed(must remain) when you need to slide down (if there is too much text in the subject), and if you need to slide to the right side the menu should also be fixed but the same should "carry" together toggle and "take" the bottom of the menu(if the menu is not filled 100%).

I’d like to keep it that way:

Normal

Sliding down

Sliding to the side

Answer 1

You can play this functionality with a little 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 it works?

What we did above was fix the element .menu and the element .toggle on the page layout, so that even with scroll they disappear. Besides, we assign a padding to the element body for it to push all its content to the right, so that this content is not overlaid by the menu.

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

Exemplo

Answer 2

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

Not that it is not possible to be made from scratch, but there is no need to reinvent the wheel when there are solutions ready and compatible with the most diverse browsers like Bootstrap.

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

Answer 3

You can take the height of the browser via jQuery or Javascript and declare a CSS for these divs with that height. Example with jQuery:

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