将一列的高度缩小到内容并将另一列拉伸到相同的高度答案

【问题标题】：Shrink one column's height to content and stretch the other to the same height将一列的高度缩小到内容并将另一列拉伸到相同的高度
【发布时间】：2017-02-02 05:29:54
【问题描述】：

我们有一个两列布局，一个蓝色列和一个绿色列。它应该在以下条件后运行：

两列的宽度相等。
蓝色栏的高度应根据其内容高度确定，不考虑绿色栏。
绿色列应始终与蓝色列具有相同的高度。所以绿柱的高度应该完全由蓝柱的高度/蓝柱的内容来决定。
位于绿色列内的灰色图像应拉伸到绿色列的高度，但保留尺寸。

有没有办法使用 flexbox 或其他 CSS 技术来实现这一点？

【问题讨论】：

是的。显示一些您尝试过的代码
我会尽快制作一个小提琴。谢谢！

标签： html css flexbox

【解决方案1】：

您可以这样做，在右列中使用绝对位置包装器，它将始终保持与左侧相同的大小，如果内容太多，它会滚动

html, body {
  margin: 0;
}
.container, .left-column {
  display: flex;
}
.left-column {
  flex: 1;
  flex-wrap: wrap;
  background: #69f;
}
.left-items {  
  flex-basis: calc(50% - 10px);
  margin: 5px;
  background: lightgray;
}
.right-column {
  flex: 1;
  position: relative;
  background: #6f6;
}
.right-wrapper {
  position: absolute;
  left: 5px; top: 5px;
  right: 5px; bottom: 5px;
  background: lightgray;
  overflow: auto;
}

<div class="container">

  <div class="left-column">

    <div class="left-items">    
Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    

  </div>

  <div class="right-column">
    <div class="right-wrapper">
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
    </div>    
  </div>
  
</div>

【讨论】：

【解决方案2】：

你可以float: left蓝色栏，在绿色栏上使用position: absolute，在上面设置right : 0，让它拉到容器的右边。对于使用容器全高并保持比例的图像，您可以使用带有background-image 和background-position: cover 的div。

这是一个简单的 html 结构及其 css 的示例：

HTML

<div class="col-container">
    <div class="blue-col">
        <div class="blue-col-content">
            Variable height content
        </div>
    </div>
    <div class="green-col">
        <div class="img"></div>
    </div>
    <div style="clear:both;"></div>
</div>

CSS

.col-container {
  position: relative;
  width: 100%;
  height: auto;
}

.blue-col {
  background-color: blue;
  width: 50%;
  float: left;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
}

.blue-col-content {
  background-color: #ccc;
  height: 500px;
}

.green-col {
  position: absolute;
  top: 0;
  right: 0;
  background-color: green;
  width: 50%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.green-col .img {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('http://cdn.blessthisstuff.com/imagens/stuff/porsche-356-outlaw.jpg');
}

这里是a working fiddle的解决方案。

【讨论】：