时间戳

首页 > 解决方案 > HTML 错误？即使父母身高固定，某些元素也会影响远祖的身高

html - HTML 错误？即使父母身高固定，某些元素也会影响远祖的身高

问题描述

为什么即使其直接父级具有固定高度，这些元素也会影响远祖的高度？

这里有一个两行两列的简单表格：

<table>
  <tr class="row">
    <td>text</td>
    <td class="column">
      <div id="problem1"></div>
      <div class="text">foo</div>
    </td>
  </tr>
  <tr class="row">
    <td>text</td>
    <td class="column">
      <div id="problem2">
        <img>
      </div>
      <div class="text">foo</div>
    </td>
  </tr>
</table>

使用此样式表：

.row {
  background-color: #aaa;
}

.column {
  display: flex;
  align-items: center;
  width: 500px;
  height: 55px;

  background-color: #888;
}

#problem1 {
  background-color: red;
  height: 200px;
  width: 10px;
}

#problem2 {
  background-color: blue;
  height: 200px;
  width: 20px;
}

#problem2 img {
  background-color: green;
  height: 200px;
  width: 10px;
}

我期望的是行的高度跟随最高列的高度。在这种情况下，在 CSS 中.column有一个固定的高度。55px

相反， 的孩子.column正在影响行的高度。

在第一个示例中， 的直接子级.column设置其高度.row

第一行

这里，红色元素是列的子元素（浅灰色），它是一个列，并且具有固定高度为 55px 的行（深灰色）

但是，在第二行中，嵌套的子级（在本例中为img）是确定.row. 奇怪的是，当我将 更改img为不同类型的元素 ( div) 时，它并没有影响.row.

第二行

这里，HTML 层次结构是行 > 列 > 蓝色 > 绿色

此外，设置一个.row小于影响高度的最大后代的高度将不起作用。即使!important对于 height 属性。就好像后代的身高优先于.row.

直到我遇到这样的情况，我认为 HTML 元素只能影响其直接父级的维度，而不是超过 1 级的祖先（除非维度/属性通过其父级传播并且祖先没有固定的高度宽度）

相当诡异的结果。如果有人能解释发生了什么或向我指出正确的资源以了解这种情况，我将不胜感激。

感谢您的时间。

这是一个说明帖子的小提琴：https ://jsfiddle.net/u2745hjy/1/

标签： htmlcss

解决方案

您不能阻止child高度超过parent. 相反，您可以使用height: 100%tochild以使其parent具有高度。或者您可以设置overflow: auto为parent，scroll如果它们child的高度高于该高度

推荐阅读