html - 如何在纯 css 中设置大列的高度等于小列的高度？

Question

我正在尝试制作 2 个具有相同高度的 div:

http://image.prntscr.com/image/32ca3f340fba4e2dbd3c7d1e434f0938.png

<div class="parent">
  <div class="small">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  </div>
</div>

例子

.parent {
  background: red;
}
.small {
  background: blue;
  float: left;
  width: 65%
}
.large {
  background: green;
  float: right;
  width: 35%
}
.clear {
  clear: both
}

<div class="parent">
  <div class="small">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
    <br>
  </div>
  <div class="clear">
  </div>
</div>

我希望动态(大)div 与静态(小)div 具有相同的高度。动态 div 总是比静态 div 长。我必须用 css(没有 jquery)来做。我已经找到了几种如何使静态 div 与动态(例如 table 或 flex)一样大的解决方案，但是我找不到任何如何使动态与静态一样小的解决方案。

CSS - Equal Height Columns? - 不是答案。这里的列都与最长的列一样大。

再一次:我需要使动态 div 和静态一样小。动态 div 应该有滚动条。

另一个限制 - 父级、静态和动态 div 不应将高度/宽度设置为像素中的某个永久值。

Answer 1

这是诀窍。

1. 在父级上添加position: relative。
2. 将 position: absolute 的动态 div 元素(高度较大)放在父元素中。

为此需要以下 css:

.parent {
  position: relative;
}
.large-div {
  position: absolute;
  overflow: auto;
  left: 300px;
  bottom: 0;
  top: 0;
}

注意:您可以更改left、bottom 和top 根据您的需要设定值。

.container {
  border: 1px solid #000;
  margin-bottom: 20px;
  position: relative;
  padding: 10px;
}

.container div {
  border: 1px solid #000;
  padding: 10px;
  width: 250px;
}
.container div p {
  margin: 0;
}
.large {
  position: absolute;
  overflow: auto;
  bottom: 10px;
  left: 300px;
  top: 10px;
}

<div class="container">
  <div class="small">
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
  </div>
  <div class="large">
    <p>
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
     </p>
  </div>
</div>

<div class="container">
  <div class="small">
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
  </div>
  <div class="large">
    <p>
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
      Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
     </p>
  </div>
</div>