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

查看：25
本文介绍了将一列的高度缩小到内容并将另一列的高度拉伸到相同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我们有一个两列布局，一个蓝色列和一个绿色列.它应该在以下条件后表现:

  • 两列的宽度相等.

  • 蓝色列的高度应根据其内容高度确定，不考虑绿色列.

  • 绿色列应始终与蓝色列具有相同的高度.所以绿色列的高度应该完全由蓝色列的高度/蓝色列的内容决定.

  • 位于绿色列内的灰色图像应拉伸到绿色列的高度，但保留尺寸.

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

解决方案

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

html, body {边距:0；}.container, .left-column {显示:弹性；}.左列{弹性:1；flex-wrap: 包裹;背景:#69f；}.left-items {flex-basis: calc(50% - 10px);边距:5px；背景:浅灰色；}.右列{弹性:1；位置:相对；背景:#6f6；}.右包装{位置:绝对；左:5px；顶部:5px；右:5px；底部:5px；背景:浅灰色；溢出:自动；}

<div class="left-column"><div class="left-items">内容将在此处推送高度
<div class="left-items">内容将在此处推送高度

<div class="left-items">内容将在此处推送高度

<div class="left-items">内容将在此处推送高度

<div class="left-items">内容将在此处推送高度

<div class="left-items">内容将在此处推送高度

<div class="右栏"><div class="right-wrapper">内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>内容将在此处滚动<br>

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆