Original inquiry (REVISED)
CSS: Why does a table-cell sibling with a height of 100% exceed the body of the table-row?
Experimenting with CSS tables, I am striving to achieve an evenly spaced column layout.
- I aim to have an "aside" on the left side that occupies 100% of the page's height.
- To the right of the "aside," I intend to place a "header" above the main content.
- Both the "header" and the "main" should extend to cover 100% of the page's height.
- The entire layout should expand in height as the content within it grows.
Here is an example of my test: https://jsfiddle.net/264z0ovf/
I set the "aside" as a table-cell and set the height of "main" to 100%. This resulted in "main" exceeding the body of the table-row at the bottom.
Can you clarify why "main" overflows the "body" table-row when its height is set to 100%?
I did not anticipate this overflow. I expected "main" to fill the remaining space below the "header" or for the table to expand and encompass the entire height.
html,
body {
margin: 0;
height: 100%;
}
html {
display: table;
}
body {
background-color: #0000ff;
display: table-row;
}
aside {
background-color: #00ff00;
display: table-cell;
}
header {
background-color: #909090;
}
main {
background-color: #ffffff;
height: 100%;
}<html>
<body>
<aside>ASIDE</aside>
<header>HEADER<br>AND SOME CONTENT</header>
<main>MAIN</main>
</body>
</html>Too Long; Didn't Read (TL;DR)
I understand that percentage heights are calculated based on the parent's height.
Therefore, if "main" has a height of 100%, it translates to 100% of the "body."
Adjacent to the "header" is a sibling anonymous table-cell that should wrap around both "aside" and "main." Consequently, the row of the table-body should also expand as its cells grow.
Reference: https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Any table element will automatically generate necessary anonymous table objects around itself
Another example where "main" does not overflow the table can be found here: https://jsfiddle.net/80a53fvs/
- I introduced a div table with a height of 100% to enclose both "header" and "main".
- I switched "main" to act as a table-row while keeping its height at 100%.
This configuration causes "main" to occupy the remaining height under the "header" without overflowing the table.
html, body {
margin: 0;
height: 100%;
}
html {
display: table;
}
body {
background-color: #0000ff;
display: table-row;
}
aside {
background-color: #00ff00;
display: table-cell;
}
div {
display: table;
height: 100%;
}
header {
background-color: #909090;
}
main {
background-color: #ffffff;
height: 100%;
display: table-row;
}<html>
<body>
<aside>ASIDE</aside>
<div>
<header>HEADER<br>AND SOME CONTENT</header>
<main>MAIN</main>
</div>
</body>
</html>