Question

原始问题（已编辑）

CSS：为什么高度为100％的表格单元兄弟姐妹超过表格行主体

我正在测试CSS表。在我的一项测试中，我试图获得等高的列布局。

我想在左侧留一个“旁边”，该位置应占页面高度的100％（例如列）。
作为“预留”的权利，我希望在“主要”内容上方有一个“标题”。
我希望“页眉”和“主要”填充页面高度的100％。
我希望随着内容的增加，整个布局的高度也会增加。

我将“ aside”设置为表格单元，并将“ main”高度设置为100％。这导致“主体”正好具有其父代高度的100％，并且溢出了“主体”的底部。

您能解释一下为什么高度为100％的“ main”溢出“ body”表行吗？

我没想到溢出。我以为“主要”会填满“标题”下的剩余空间，或者填满整个高度的桌子。

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％。

“标头”旁边是一个同级匿名表格单元格，该表格单元应将“ aside”和“ main”包装起来。因此身体的表行也应该随着细胞的生长而增长。
来自https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

任何表元素将自动生成必要的匿名围绕自身放置桌子对象

这是另一个示例，其中“ main”不使表溢出：https://jsfiddle.net/80a53fvs/

我添加了一个高度为100％的div表来包装“标题”和“主”。
我将“ main”更改为表格行，并将其高度保留为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>

Answer 1

已添加

endwin

import seaborn as sns
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

fig, ax = plt.subplots(nrows=1, ncols=1)
n=200
to_plot = np.random.uniform(low=0.0, high=1.0, size=n)
mods = ['a','b']
model_col = mods*(n/2)
opt=['1']*(n/2)+['2']*(n/2)

d={'Model':pd.Series(model_col),'Par':pd.Series(to_plot),'opt':pd.Series(opt)}
df = pd.DataFrame(d)
sns.swarmplot(x='Model', y='Par',hue='opt',dodge=True,data=df,size=2,palette=['#469990','#000075'])
sns.pointplot(x="Model", y="Par", hue='opt', data=df,join=False,dodge=True,
     ci=68,n_boot=1000,capsize=0.1,errwidth=0.5,scale = 1.5,palette=['k','k'])

ax.get_legend().remove()
plt.show()

body {
 overflow: hidden;
}

了解表格单元格为何不包装其100％百分比高度内容的原因

1 个答案: