The following code (also available in this playground: https://playcode.io/1524099)
> <html>
> <head>
> <style>
> * {
> margin: 0;
> padding: 0;
> }
> body {
> background-color: #333;
> }
> html {
> background-color: green;
> }
> .div-a {
> background-color: yellow;
> height: 50%;
> </style>
> </head>
> <body>
> <div class='div-a'>
> </div>
> </body>
> </html>
… correctly displays a yellow patch for the div-a div that occupies 50% of the available height.
My question is why the code works. I understand that for a percentage height to work one of the ancestor components needs to have an explicitly set height property. This condition does not hold in the above code as the div-a div specifies a percentage height and yet none of its ancestors have an explicitly set height property.
Curiously, if I paste that code as an HTML snippet using this site's own HTML rendering feature, the yellow area indeed does not display at all (which is the correct behavior according to my mental model).
What is the reason behind all this and why is such a seemingly simple concept do convoluted in the execution?
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
html {
background-color: green;
}
.div-a {
background-color: yellow;
height: 50%; <html>
<body>
<div class='div-a'>
</div>
</body>
</html>