div height in percentage does not work even with 100perc html and body

Question

I'd like to set the div height using percentages that do not depend on items in it. I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.

Please help.

I have this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
    <header>
        <p>header</p>
    </header>
    <div id="main">
        <p>main info</p>
    </div>
</div>
</body>
</html>

And this CSS.

html{
    width: 100%;
    height: 100%;
}
body{
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 100%;
}

header{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 10%;
    border: solid red 1px;
}

#main{
    display: block;
    width: 65%;
    height: 80%;
    border: solid green 1px;
    margin: 8% auto 0 auto;
}

You could use vh units instead of % if it is a percentage of the scren you are after. — R Reveley, Dec 05 '16 at 12:45

ixpl0 · Accepted Answer · 2016-12-06T07:45:23.037

2

You forgot to make it's parent 100% height too.

#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser

#conteiner {
    height: 100%;
}

edited Dec 06 '16 at 07:45

answered Dec 05 '16 at 12:16

ixpl0

748
5
15

Jesus Christ, forgot about container, thx a lot. One more question, please. I got 10% height header. If I set margin-top for container for 10% it lays not under the header but way more lower. What's the problem? ty) – Dec 05 '16 at 12:21
its because margins in percent calculating from blocks `WIDTH` property :( – ixpl0 Dec 05 '16 at 12:23
ehm, did not get it) Can u advice me please where can I read about this details) Ty – Dec 05 '16 at 12:25
http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width – ixpl0 Dec 05 '16 at 12:26
Ty a lot)) I'm new to front-end Java is everything for me Ty once more c: – Dec 05 '16 at 12:27
w8ing the timer to let me, sure m8) – Dec 05 '16 at 12:29

score 1 · Answer 2 · answered Dec 05 '16 at 15:03

1

at your style file you have to write style for container div code like

#container{
     height:100%;
}

answered Dec 05 '16 at 15:03

Manigandan Ps

11
1

div height in percentage does not work even with 100perc html and body

2 Answers2