CODEWITHSUNDEEP
htmlcss
Meow
Meow

Reputation: 19071

How to make the div contents fit into the parent div with height 100%?

I looked through many posts and still can't get this one to work...

My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".

The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc

Please let me know if you need more clarification. Thanks in advance!

http://jsfiddle.net/pn9Qa/

HTML

<div class='container'>
    <div class='top'>some text</div>
    <div class='bottom'>
        <div class='one'>header</div>
        <div class='two'>items here</div>
    </div>
</div>

CSS

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 60px;
    width: 100%;
    background-color:pink;
    float:left;

}
.bottom
{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.one
{
    width: 100%;
    height: 30px;
    background-color: orange;
}
.two
{
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}

Upvotes: 1

Views: 17206

Answers (3)

Ben Miller
Ben Miller

Reputation: 510

Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
    overflow: hidden;
}

Upvotes: 2

kalley
kalley

Reputation: 18462

Here's one using calc():

width: -webkit-calc(100% - 60px); /* note, the space is necessary */

Here's one using display: flex

display: -webkit-flex;
-webkit-flex-direction: column;

Here's one using padding/margins and z-index:

box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;

Then, the old, do some math yourself version.

Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.

Upvotes: 5

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Do you need this: http://jsfiddle.net/pn9Qa/1/

html, body { height: 100%; }

.container
{
    height: 100%;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 100%;
    width: 100%;
    background-color:pink;
    float:left;

}
.bottom
{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.one
{
    width: 100%;
    height: 30px;
    background-color: orange;
}
.two
{
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}

Upvotes: 0

Related Questions