缩小一列的高度，将另一列伸展到相同的高度 [英] Shrink one column's height to content and stretch the other to the same height

问题描述

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

$ ul

两列的宽度是相等的。

蓝柱高度应根据其内容高度确定，而不考虑绿柱。

绿柱应该总是和蓝色的一样高。所以绿柱的高度应该完全由蓝柱的高度/蓝柱的内容决定。 绿色的列应伸展到绿色的高度，但保留维度。

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

< img src =https://i.stack.imgur.com/GRhCb.jpgalt =Example>

解决方案

div>

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

 < div class =container > < div class =left-column> < div class =left-items>内容将推高到这里< br> < / DIV> < div class =left-items>内容将推高到这里< br> < / DIV> < div class =left-items>内容将推高到这里< br> < / DIV> < div class =left-items>内容将推高到这里< br> < / DIV> < div class =left-items>内容将推高到这里< br> < / DIV> < div class =left-items>内容将推高到这里< br> < / DIV> < / DIV> < div class =right-column> < div class =right-wrapper>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br>内容将在这里滚动< br> < / DIV> < / DIV> < / div>  

We have a two-column layout, with a blue and a green column. It should behave after the following conditions:

• Both columns have equal width.

• The blue column height shall be determined on its content height, without giving any regard to the green column.

• The green column should always have the same height as the blue one. So the height of the green column should be entirely determined by the height of the blue column / the content of the blue column.

• The gray image positioned within the green column should stretch to the height of the green column but preserving dimensions.

Is there a way of achieving this using flexbox or other CSS techniques?

解决方案

You could do like this, where you use a absolute position wrapper in the right column, which will always keep same size as the left, and if to much content, it scrolls

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>

这篇关于缩小一列的高度，将另一列伸展到相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！