Menu
Simplest of pages to demonstrate my problem:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
}
body
{
margin: 0;
padding: 0;
}
#container
{
background: red;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
div-container correctly fills the browser window with red. Now wrap the div in a form:
<body>
<form>
<div id="container"></div>
</form>
</body>
and div-container collapses. Why? What is it about a form tag that 'breaks' the 'closest ancester with height'?
590
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
In terms of art, form refers to objects that are 3-Dimensional, or have length, width, and height.
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio.
form is a block element, block elements don't have any height unless their content expands or they're explicitly given a height. The closest ancestor of #container is form, and it's height is 0, so #containers height is 0.
59
100% height depends on all ancestors having explicitly declared height. Add a height to the FORM and your example should work.
HTML, BODY, FORM {
height: 100%;
}
The same holds true for any percentage-based value. If a parent element does not have a height specified its box will be sized based on content. Thus, the child's percentage height will be based on whatever height was calculated for its parent.
22
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
