CODEWITHSUNDEEP
cssheight
Rob
Rob

Reputation: 11

i can't fit <div> container to 50%

I have a simple code:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" /> 
        <style type="text/css">
            html{   
                background-color: red;
                height: 100%;
            }
            body {
                background-color: black;
                min-height: 50%;
                padding: 10px;
            }
            .wrap{
                width: 100%;
                height: 50%;
                background-color: green;
            }
        </style>        
    </head>
    <body>
        <div class="wrap">
            test
        </div>
    </body>
</html>

I expect to fit .wrap container to 50% of his parent container (body). But its doesnt work... If i change height property to ex. height: 150px; and css working fine... I don't understand why.

Thank you for your response! This is just examle, not real layout. Idont understand why i cannot wrap .wrap container to 100% of body container (black color) with % unit. I think about responsive layout and i must to use % unit, not px or others. Besides, it is little illogical situation :)

Upvotes: 0

Views: 106

Answers (4)

demonofthemist
demonofthemist

Reputation: 4199

Change body style to

body {
    height: 100%;
}

Do not embbed min-height & height with each other since each of them is calculated msed on other.

When you give height in percent to the container embedded in parent container with min-height, them a paradox arises.

1: for inner container (100%) of parent, height must have to calculate, but since parent have no specific height then it can not determin what to do.

2: Parent has min-height, but do determin its height, height of it's children should be konwn, which is not know in this case since it is 100% of parent which has ho height specified.

Due to above two case height of both parent & child become 0 (Undefined), which is happening in your case. To avoid this when giving percent height to any div ensure it's parent has a fixed height, otherwise whole calculation with get wrong.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Try like this DEMO

CSS:

html {
    background-color: red;
    height: 100%;
}
body {
    background-color: black;
    height: 50%;
    padding: 10px;
}
.wrap {
    width: 100%;
    min-height: 50%;
    background-color: green;
}

Upvotes: 1

J Prakash
J Prakash

Reputation: 1333

HTML :

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" /> 
        <style type="text/css">
            html{   
                background-color: red;
                height: 100%;
            }
            body {
                background-color: black;
                min-height: 50%;
                padding: 10px;
                height: 100%;
            }
            .wrap{
                width: 100%;
                height: 50%;
                background-color: green;
            }
        </style>        
    </head>
    <body>
        <div class="wrap">
            test
        </div>
    </body>
</html>

Try this it will resolve your problem.

This happens because if u see there is no height of parent container so we have to give some height to it.

Upvotes: 0

Suyesh Tiwari
Suyesh Tiwari

Reputation: 93

Use min-height in the "px" that will work fine. you do not have the content in the div so you have to use min-height in pixels.

html{   
background-color: red;
height: 100%;
}
body {
background-color: black;
min-height: 50%;
padding: 10px;
}
.wrap{
width: 100%;
min-height: 200px; /*-- similar like this --*/
background-color: green;
}

Upvotes: 0

Related Questions