Heigth does not obey the reported value in percentage

Asked

Viewed 51 times

0

I wanted to know why the property height in css does not obey the given value in % but obey the given value in px, in % is as if only width works, someone can explain to me why this happens and how to get around this problem using %?

code I was doing, note that on 1° div I set the height greater than the width in px and it obeyed the proportions, but when I used a higher height in % it was ignored.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #vermelho{
            background-color: red;
            width: 300px;
            height:1000px;
        }
        #amarelo{
            background-color: yellow;
            width: 50%;
            height: 100% ;
        }
    </style>
</head>
<body>
        <div id="vermelho"> </div>
        <div id="amarelo">
            <p>ewqeqwewqeq </p>
        </div>
    
</body>
</html>

html css

1 answer

3


When %is used, the element in question seeks to be based on the size of a "parent" element, which in this case would be the <body>. Try to add this:

html,body{
  height: 100%
}

  • then the body ,by default, does not come with 100% height more yes 100% width?

  • @Akali I think yes, the height of the browser needs the definition of the developer to know how much height it needs. In many cases this is not used, because as you put content inside the <body>, it increases this height, so in the end you do not need to use.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.