Question

<div class="wrapper">
  <div class="sidebar-wrapper"></div>
  <div class="content-wrapper"></div>
</div>

content-wrapper的高度是动态的（auto）。有没有办法获得它的高度并将其用于sidebar-wrapper以便它看起来不错？

Answer 1

像表格单元格那样显示它们就可以了。表格单元格可以根据内容自动调整其高度，同一行中的所有单元格都可以达到相同的高度。如果为侧栏指定固定宽度（很可能），则可以轻松获取内容包装器以填充剩余空间。

最长的内容将决定高度。

.wrapper {
  width: 100%;
  display: table;
}
.sidebar-wrapper,
.content-wrapper {
  display: table-cell
}

.sidebar-wrapper {
  width: 200px;
  background-color: silver;
}

.content-wrapper {
  background-color: yellow;
}

<div class="wrapper">
<div class="sidebar-wrapper">Here is <br>content<br>that is .....<br><br><br><br><br><br>Quite long</div>
<div class="content-wrapper">Smaller content</div>
</div>

Answer 2

Flexbox是@ GolezTrol CSS表的替代品。

.wrapper {
  display: flex;
}
.sidebar-wrapper {
  width: 200px;
  background-color: silver;
}
.content-wrapper {
  background-color: yellow;
  flex: 1;
}

<div class="wrapper">
  <div class="sidebar-wrapper">Here is
    <br>content
    <br>that is .....
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>Quite long</div>
  <div class="content-wrapper">Smaller content</div>
</div>

如何均衡同胞div高度？

2 个答案: