All geek questions in one place

Percent div height doesn't work even with 100perc html and body

I would like to set div heightusing percentages that are independent of the elements in it. I have a fixed caption at the top of the screen and a centered div. But the set height in percent does not work. It expands only if I add some elements.

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 that 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;
}
+4
source share
2 answers

You forgot to make it a parental height of 100%.

#conteiner , div. - . ,

#conteiner {
    height: 100%;
}
+2

div ,

#container{
     height:100%;
}
+1

Source: https://habr.com/ru/post/1662832/

More articles:


All Articles