Menu
I'd like to use relative (in percentage) heights on all my divs based to the height of the screen. Problem is that I'm using an auto-height container element. Is there any way to use relative sizes on divs and still have an automatic height on my parent div. Everything works as expected if i'll set the height of the container to 100%, but i'll need it to expand by it's content.
This is basically how i've set things up now:
<html>
<head>
<style>
body, html {
height: 100%;
width: 100%;
}
.container {
height: auto;
width: 100%;
}
.element1 {
height: 15%;
width: 80%;
}
.element2 {
height: 25%;
width: 80%;
}
</style>
</head>
<body>
<div class="container">
<div class="element1">Some text here</div>
<div class="element2">Some stuff here</div>
</div>
</body>
Your help will be appreciated!
648
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
When using the keyword auto , height is calculated based on the elements content area unless explicitly specified. This means a value based on a percentage is still that of the elements content area.
You cannot. A parent with a height value of auto means the parent will extend to contain all its children - therefore the container's height is dependent on its children's height.
If the children have a height relative to their parent, their height is dependent on the parent's height.
This circular dependency prevents you from doing what you describe.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
