制作一个与其同级列高度相同的弹性列 [英] Make a flex column of a height of its sibling column

查看：26
本文介绍了制作一个与其同级列高度相同的弹性列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个包含一些内容的 flex 列.我希望第一列的高度始终等于第二列的高度，如果它的内容比另一列多，则使用 overflow: auto.一个重要的注意事项是我不想使用绝对定位.以下是我所追求的:

.cover {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；溢出-y:自动；}.content-1 {高度:500px；背景颜色:绿色；}.content-2 {高度:150px；背景颜色:蓝色；}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表"/><div class="container-fluid"><div class="row"><div class="col"><div class="cover"><div class="content-1"></div>

<div class="col"><div class="content-2"></div>

有没有办法在没有嵌套在第一个列中的绝对定位元素的情况下实现相同的目标?提前致谢.

解决方案

这是我在上一个问题 在这里你可以依靠 min-height:100%;height:0; 技巧.height:0 将强制元素不影响容器的高度，min-height:100% 将强制它等于兄弟定义的高度元素:

.cover {高度:0；最小高度:100%；溢出-y:自动；}.content-1 {高度:500px；背景颜色:绿色；}.content-2 {高度:150px；背景颜色:蓝色；}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="样式表"/><div class="container-fluid"><div class="row"><div class="col"><div class="cover"><div class="content-1"></div>

<div class="col"><div class="content-2"></div>

I have two flex columns with some content. I want the first column height to always be equal to the height of the second column, and use overflow: auto if it has more content than the other column. One important note is that I don't want to use absolute positioning. Below is what I am after:

.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.content-1 {
  height: 500px;
  background-color: green;
}

.content-2 {
  height: 150px;
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      
      <div class="cover">
        <div class="content-1"></div>
      </div>
      
    </div>
    <div class="col">
    
      <div class="content-2"></div>
    
    </div>
  </div>
</div>

Is there a way to achieve the same without the absolutely positioned element nested in the first col? Thanks in advance.

解决方案

Here is an idea I used in a previous question where you can rely on the min-height:100%;height:0; trick. The height:0 will force the element to not affect the height of the container and min-height:100% will force it to be equal to the height defined by the sibling element:

.cover {
  height:0;
  min-height: 100%;
  overflow-y: auto;
}

.content-1 {
  height: 500px;
  background-color: green;
}

.content-2 {
  height: 150px;
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      
      <div class="cover">
        <div class="content-1"></div>
      </div>
      
    </div>
    <div class="col">
    
      <div class="content-2"></div>
    
    </div>
  </div>
</div>

这篇关于制作一个与其同级列高度相同的弹性列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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