原来的问题(编者)
CSS:为什么高度100%表细胞同胞超过表行体
我测试的CSS表。在我的测试中一个我试图得到一个高度相等列布局。
下面是我的测试例子: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/
这导致在“主”填充下面的“报头”的剩余高度,而不会溢出表。
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>
添加
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>