CODEWITHSUNDEEP
csslayout
Somebody
Somebody

Reputation: 9645

CSS: Taking the all available height inside parent without overflowing it

<div id="wr">
    <div id="con_top"></div>
    <div id="con_bottom"></div>
</div>​

#wr {
    height:400px;
    width:80%;
    margin:50px auto;
    border:1px solid black;
}
    #con_top {
        height:40px;
        margin:5px;
        border:1px solid red;            
    }
    #con_bottom {
        height:100%;
        border:1px solid blue;
        margin:5px;    
    }​

http://jsfiddle.net/nMbWw/

How to make blue square, fit the black, parent container? Is it possible without javascript?

With table elements it's much easier, but table is bugged in Opera and IE. td element on height 100% doesn't work as intended, taking the height of table element itself ignoring the height of all others td in that table.

For example, open with Opera or IE:

http://jsfiddle.net/UTMRn/3/

Upvotes: 5

Views: 3104

Answers (2)

kapa
kapa

Reputation: 78671

Forget tables :). You could use absolute positioning:

#wr {
    height:400px;
    width:80%;
    margin:50px auto;
    border:1px solid black;
    position: relative; /* added to keep the absolute element inside */
}

#con_top {
    height:40px;
    margin:5px;
    border:1px solid red;            
}

#con_bottom {
    border:1px solid blue;
    margin:5px;    
    position: absolute; /* make it absolute */
    top: 45px; /* the height of the other element + its margin */
    bottom: 0; /* stick to the bottom */
    left: 0; /* stick to the left */
    right: 0; /* stick to the right */
}​

jsFiddle Demo

Upvotes: 8

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 120927

height:100%; means I want the same height as my parent. Since the parent #wr has more children, #con_bottom does not fit. In your current case, a height of 85% seems to be right for #con_bottom. Remember that margins and borders (and the parent's padding) count towards the available space.

Upvotes: 0

Related Questions