CODEWITHSUNDEEP
htmlcsscss-tables
cedlog
cedlog

Reputation: 11

Understanding why table cell doesn't wrap its 100% percent height content

Original question (EDITED)

CSS: Why table-cell sibling with height 100% exceeds table-row body

I am testing CSS table. In one of my test I'm trying to get an equal height column layout.

Here's my test example : https://jsfiddle.net/264z0ovf/

I set "aside" as a table-cell and set "main" height to 100%. This results in "main" having exactly 100% of its parent's height and overflowing the bottom of "body".

Can you explain why "main" with 100% height overflow the "body" table-row ?

I was not expecting the overflow. I thought "main" would fill the remaining space below "header" or either the table to grow and wrap the whole 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>

TL;DR

I know percent height is computed from the parent's height.
So if "main" height is 100% then it would mean 100% of "body".

Next to "header" is a sibling anonymous table-cell which should wrap "aside" and "main". So the body table-row should also grow when its cells grow.
From https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

Any table element will automatically generate necessary anonymous table objects around itself

This is another example where "main" doesn't overflow the table : https://jsfiddle.net/80a53fvs/

This results in "main" filling the remaining height below "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>

Upvotes: 1

Views: 484

Answers (1)

KJEK-Code
KJEK-Code

Reputation: 705

added

body {
 overflow: hidden;
}


html,
body {
  margin: 0;
  height: 100%;
}

html {
  display: table;
}

body {
  background-color: #0000ff;
  display: table-row;
  overflow: hidden;
}

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>

Upvotes: 1

Related Questions