bootstrap 4行的高度由特定的col设置-不是最高的

时间：2018-11-21 10:26:00

标签： css twitter-bootstrap bootstrap-4 overflow

我有一排有两个列。
第一个col包含一些必须可见的内容：它不会溢出行或滚动。
第二行包含一长串我要滚动浏览的列表，因此它不会溢出该行：

存在溢出问题的响应式设计：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-8">
      <div class="alert alert-info">
        <h2>Some stuff</h2>
        <hr />
        <h4>Some stuff description</h4>
        <p>
          some example with some <code>code</code>
        </p>
      </div>
    </div>
    <div class="col-4 list">
      <div class="list-group">
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
      </div>
    </div>
  </div>
</div>

我当前正在使用的无响应设计：

我当前正在做的是手动设置高度，然后将overflow-y: scroll;设置为列表。
但是我认为它可能并没有我想要的那么响应... 

.row {
  height: 175px;
  overflow-y: hidden;
}
.list {
  height: 175px;
  overflow-y: scroll;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bttostrap/4.1.3/js/bootstrap.min.js" type="text/js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-8">
      <div class="alert alert-info">
        <h2>Some stuff</h2>
        <hr />
        <h4>Some stuff description</h4>
        <p>
          some example with some <code>code</code>
        </p>
      </div>
    </div>
    <div class="col-4 list">
      <div class="list-group">
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
        <div class="list-group-item"><p>item</p></div>
      </div>
    </div>
  </div>
</div>

任何人都有解决以下问题的方法：

  1. 具有相对于第一个col高度的行高，
  2. 具有第二个col溢出滚动

1 个答案:

答案 0 :(得分：2)

您需要创建列表组position:absolute，然后在列表和列表组上都设置overflow:auto ... 

.list {
    overflow: auto
}

.scroll {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}

演示：https://www.codeply.com/go/X2ydvxPU3k

另请参阅：
One flex item sets the height limit for siblings
Flex equal height column but respect max height of another column

相关问题
最新问题