了解为什么表格单元格不换其100%的高度百分比含量

问题描述 投票:1回答:1

原来的问题(编者)

CSS:为什么高度100%表细胞同胞超过表行体

我测试的CSS表。在我的测试中一个我试图得到一个高度相等列布局。

  • 我想要一个“搁置”在此应填写页面高度的100%(例如列)左侧。
  • A的“搁置”的权利,我想上方的“主”的内容的“标头”。
  • 我想“头”和“主”以填充页面高度的100%。
  • 我希望整个布局的高度来当他们的内容成长壮大。

下面是我的测试例子:https://jsfiddle.net/264z0ovf/

我设置“搁置”作为表单元,并设置“主”高度为100%。这将导致“主”有其父的高度正好为100%和四溢的“身体”的底部英寸

你能解释为什么“主”用100%的高度溢出“身体”表行?

我没想到溢出。我想:“主”将填写以下“页眉”或表可能剩余的空间成长,整个包住的高度。

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

我知道%的高度是从父母的身高来计算。 所以,如果“主”的高度,然后100%,这将意味着“身体”的100%。

旁边的“报头”是同级匿名表小区应包裹“搁置”和“主”。所以身体表行也应在其细胞生长壮大。 从https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

任何表格元素将自动生成自己周围必要的匿名表格对象

这是另一个例子,其中“主”不溢出表:https://jsfiddle.net/80a53fvs/

  • 我加了100%的高度的div表包“标头”和“主要”。
  • 我改变了“主要”为表行,离开它的高度为100%。

这导致在“主”填充下面的“报头”的剩余高度,而不会溢出表。

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>
html css css-tables
1个回答
1
投票

添加

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>
© www.soinside.com 2019 - 2024. All rights reserved.