Question

如果具有display: table的绝对定位元素具有明确设置的高度，如果内容高度大于提供的高度值，则元素将收缩包装内容而不考虑高度值。

＆＃13;

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}

#child {
  display: table-cell;
}

＆＃13;

<div id="main">
  <div id="child">Custom Text With Validation:</div>
</div>

＆＃13;

Answer 1

由于我没有尊重max-height的原因，因此表格单元格不会尊重其父级的高度，因此推动了表格的大小。< / p>

以下两种方法可以使其发挥作用，在position: absolute上设置child

＆＃13;

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}
#child {
  position: absolute;
  display: table-cell;
}

＆＃13;

<div id="main">
  <div id="child">Custom Text With Validation:
  </div>
</div>

＆＃13;

或在child中添加额外元素，并在其上设置height。

＆＃13;

#main {
  width: 100px;
  height: 29px;
  position: absolute;
  top: 20px;
  left: 200px;
  border: 1px red dashed;
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
}
#child {
  display: table-cell;
}
#child div {
  height: 29px;
}

＆＃13;

<div id="main">
  <div id="child">
    <div>Custom Text With Validation:</div>
  </div>
</div>

＆＃13;

在表格中添加overflow: hidden也将正确地“切断”＃34;多余的。

在绝对定位的桌子中没有被尊重的高度

1 个答案: