How to make divs auto fit themselves to the height of the window

Question

I'm having problem with making a div stretch and shrink depending on the size of the browser.

Here is the html

<div class="content_container">
    <div class="content_menu"></div>
    <div class="content_left"></div>
    <div class="content"></div>
</div>


.content_container{
    margin: 0 auto;
    height:100vh;
    display:block;  
}
.content_left{
    background: #eee none repeat scroll 0 0;
    display: inline-block;
    float: right;
    padding-top: 50px;
    position: relative;
    text-align: center;
    width: 25%;
    height:calc(100vh - 50px);
}
.content_menu{
    background: #eee none repeat scroll 0 0;
    float: left;
    height: 100px;
    width: 25%;
    height:100vh;
}
.content{
    background: #fff none repeat scroll 0 0;
    display: inline-block;
    margin-bottom: 0 !important;
    margin-right: auto !important;
    vertical-align: top;
    width: 50%;
}

I've already tried giving height:auto , 100% and 100vh but none seems to work.

The .content_left and .content_menu fall short of the height of the .content so there are blank white spaces.

Is there anyway those layers can resize themselves to fit to the height as well as the .content div.

Can anyone help me out?

Answer 1

Use viewport width/height to set an elements dimensions relative to the window

 body { padding: 0; margin: 0; width: 100%; width: 100vw; } div { background: lightblue; height: 45px; margin-top: 20px; } #two { width: 100%; width: 100vw; } #one { width: 60%; width: 60vw; } 

 <div id="one">div one</div> <div id="two">div two</div> 

Answer 2

I'm guessing the blank white spaces you are talking about are those surrounding the gray elements on the left and right side. Those are caused by the default margin on the body. Just set the body margin to zero.

body { margin: 0; }

Using your markup in your question, it appears to work as I think you want it to.