CODEWITHSUNDEEP
htmlcss
SBel
SBel

Reputation: 3359

How to make CSS height: 100% take effect in a varying height container?

My HTML has 2 divs inside an outer div:

<div class="outer">
    <div class="col-left">
        <p>Lorem Ipsum is simply dummy text of the...
    </div>

    <div class="col-right">Right</div>

    <div class="clear"></div>
</div>

The CSS is:

.outer {
    border: 1px solid black;
}

.col-left {
    float: left;
    background: cyan;
    width: 80%
    height: 100%;
}

.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}

.clear {
    clear: both;
}

The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.

How can I use height 100% without specifying in its parent a fixed height?

I'm going to use what Layne wrote in the comments.

Upvotes: 3

Views: 515

Answers (3)

sheriffderek
sheriffderek

Reputation: 9043

This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day. 

html, body {
    height: 100%;
}

.outer {
    border: 1px solid black;

    /* I use this instead of the micro clear-fix in this case - look that up */
    overflow: hidden;
    height: 100%;
}

.col-left {
    float: left;
    background: cyan;
    width: 80%;
    min-height: 100%;
}

.col-right {
    float: left;
    width: 20%;
    background: yellow;
    height: 100%;
}

http://jsfiddle.net/sheriffderek/fdxGZ/

This is also an issue with "sticky" footers and stuff: Always a battle http://codepen.io/sheriffderek/pen/ziGbE

I hope that helps!

Upvotes: 3

robz228
robz228

Reputation: 640

use jquery

$(document).ready(function(){
    var outerheight = $('.outer').height();
    $('.col-right').height(outerheight);    
});

Upvotes: 1

Brandon Babb
Brandon Babb

Reputation: 186

if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.

http://jsfiddle.net/brandonbabb/SL3FC/

html, body {
    height:100%
}
.outer {
    border: 1px solid black;
    height: 100%;
    max-height: 500px
}
.col-left {
    float: left;
    background: cyan;
    width: 80%;
    height: 100%;
}
.col-right {
    float: left;
    width: 15%;
    background: yellow;
    height: 100%;
}
.clear {
    clear: both;
}

Upvotes: 1

Related Questions