How to create a div with height in percentage?

Asked

Viewed 692 times

0

Good, guys! I have a question. When I create a div/footer/header and I will in css edit your dimensions with you quietly put the width 100%, however the height I can’t edit with percentage, only with px, could give me a hint on how to do this?

In case I should put the body with height of 100% for others of the size of how many?

I avoid putting px because I believe the site is not responsive without it, but in case I have any tips thank you. Thanks in advance!

2 answers

1

If you try to set the height of a container div to 100% of the browser window using the height of the style rule: 100%; it does not work because the percentage (%) is a relative unit, so the resulting height depends on the height of the parent element.

For example, if you consider the following example, div . container has two parent elements: the element and the . And we all know that the default value of the height property is automatic. Therefore, if we also define the height of the elements and as 100%, the resulting height of the container div will become equal to the 100% height of the browser window element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
    }
    .container {
        height: 100%;
        background: #f0e68c;
    }
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>






0

The parent element must be with the position=relative This way, the child elements can be with the height percentage. Remembering that the parent element should be with the height defined.

Browser other questions tagged

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