Question

我们有两列布局，蓝色和绿色列。它应该符合以下条件：

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

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

Answer 1

你可以这样做，你在右栏中使用绝对位置包装器，它总是保持与左边相同的大小，如果有很多内容，它会滚动

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 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。

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

2 个答案: