CODEWITHSUNDEEP
htmlcss
user5953547
user5953547

Reputation:

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

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;
}

Upvotes: 4

Views: 116

Answers (2)

ixpl0
ixpl0

Reputation: 756

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%;
}

Upvotes: 2

Manigandan Ps
Manigandan Ps

Reputation: 11

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

#container{
     height:100%;
}

Upvotes: 1

Related Questions