Question

我根据另一个div的高度匹配一个div的高度。第一个div具有纵横比，因此仅从填充底部获得其高度。我使用相同的css匹配第二个，但注意到滚动条滚过内容或在不需要时出现。

的CSS：

.one {
  display: inline-block;
  height: 0px;
  width: 200px;
  padding-bottom: calc(.5625 * 200px); /* aspect ratio 56.25% of width */
  background-color: white;
}

.two {
  margin-left: 15px;
  display: inline-block;
  height: 0px;
  width: 200px;
  padding-bottom: calc(.5625 * 200px); /* aspect ratio 56.25% of width */
  background-color: white;
  overflow-y: auto; /* scroll on overflow if needed */
}

这是一个小提琴：

https://jsfiddle.net/m88stpf4/3/

Answer 1

我认为您的标记过于复杂：您应该只使用min-height和max-height的组合来获得所需的结果：

＆＃13;

.content-box {
  vertical-align: top;
  display: inline-block;
  min-height: calc(.5625 * 200px);
  max-height: calc(.5625 * 200px);
  width: 200px;
  background-color: white;
  overflow-y: auto;
  margin: 0 15px 15px 0;
  
  /* rest are totally optional*/
  padding: 10px;
  box-sizing: border-box;
}
body {
  background-color: #eee;
  padding: 15px;
}

＆＃13;

<div class="content-box">
  contents for div one
</div>

<div class="content-box">
  contents for div two
  scrollbar not needed here but it appears anyway
  this should probably have a lot more text. a lot more text a lot more text
  this should probably have a lot more text. a lot more text a lot more text
  this should probably have a lot more text. a lot more text a lot more text
</div>

<div class="content-box">
  contents for moar divs
  scrollbar not needed here but it appears anyway
</div>

＆＃13;

Answer 2

出现垂直滚动条，因为子元素的高度被添加到父元素的计算填充中。

最简单的解决方案是将子元素的高度设置为inherit，以便它继承父元素的高度0：

Updated Example

.one .one-contents,
.two .two-contents {
  height: inherit;
}

当然，您也可以将高度设置为0，但inherit值可能更灵活。

如果元素包含多个子元素，那么您始终可以将直接子选择器>与通用选择器*结合使用，以便定位任何直接子元素（而不是比所有嵌套的后代元素。）

.one > *,
.two > * {
  height: inherit;
}

如果您想要其他解决方案，另一种方法是将父元素的display值更改为flex，或者在这种情况下，inline-flex：

Updated Example

.one, .two {
  display: inline-flex;
}

Answer 3

https://jsfiddle.net/m88stpf4/4/

添加了滚动条，因为我猜你的例子中的高度设置为0。检查小提琴。我在您的代码中添加了以下行。

.two {
  position: relative;
}
.two-contents{
  position: absolute;
  top: 0;
  left: 0;
}

使用此填充顶部（或底部）时的方法...使该容器相对，然后将一个绝对容器添加到带填充的容器中

滚动条滚动过去的内容（未指定高度，仅填充底部）

3 个答案: