时间戳

首页 > 解决方案 > 如果第二列溢出第一列的高度，则滚动它

html - 如果第二列溢出第一列的高度，则滚动它

问题描述

我在 Bootstrap 4 中创建一行，它有两列。左栏由两张牌组成，右栏是一张牌。

左列的卡片都是带有 iframe 的响应式嵌入，使用 embed-responsive-16by9 类。

右栏是一张带有项目符号列表的简单卡片。我希望右列与最左列的总 100% 高度匹配，如果项目符号列表太长，则滚动溢出。

我花了几个小时玩 flexboxes 和溢出以及各种各样的东西，只是无法让这种行为发挥作用。

从下面的代码中，您可以看到 #chatItems div 在整个 JavaScript 代码中添加了新项目。

附加文件后，随着 chatItem 列表项的数量增加且不开始滚动，整行变为右侧列的高度。

整体布局

<div class="row pt-3">
<div class="col-md-9">

   <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
            </div>  
          
            <div class="card-body embed-responsive embed-responsive-16by9">         
                <iframe src="https://player.vimeo.com/video/12345567895?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>              
            </div>
        </div>
    </div>
      
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
            </div>
        
            <div class="card-body embed-responsive embed-responsive-16by9">         
                <iframe src="https://player.vimeo.com/video/12345567896?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>              
            </div>
        </div>
    </div>
</div>

<div class="col-md-3 ">
  <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal text-left text-uppercase">Chat Items</h4>
            </div>
        
            <div class="card-body p-0 overflow-y-scroll" id="chatItems">            
                <ul>
                    <li>First Item</li>
                </ul>
            </div>
        </div>
    </div>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

这个怎么样...？

我不得不在您的聊天卡中添加一些自定义 CSS 来处理溢出滚动。.overflow-y-scroll据我所知，引导程序中不存在类...

https://getbootstrap.com/docs/4.5/utilities/overflow/

在我的示例中，我已将.col-类设置为每个屏幕尺寸，因此演示将在此处进行。

如果您在移动设备中查看它的父列为 100%，我已为您的聊天卡设置了 300 像素的最小高度。你当然改变这个。

请参阅下面的演示和 jsfiddle ...

https://jsfiddle.net/joshmoto/2oy5kcfb/2/

.card-chat {
  min-height: 300px;
  height: calc(100% - 1.5rem);
}

.card-chat .card-body {
  overflow: hidden;
  position: relative;
}

.card-chat .card-body .list-group {
  top: -1px;
  right: -1px;
  left: -1px;
  bottom: -1px;
  font-size: 80%;
  position: absolute;
  overflow-x: scroll;
}

.card-chat .card-body .list-group-item:first-child,
.card-chat .card-body .list-group-item:last-child {
  border-radius: 0 !important;
}

.card-video .card-body {
  padding: 0;
  overflow: hidden;
}
<div class="container">
  <div class="row pt-3">
  
    <div class="col-8">

      <div class="card-video card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
        </div>
        <div class="card-body">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://player.vimeo.com/video/12345567895?autoplay=1&loop=1&autopause=0" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>
          </div>
        </div>
      </div>

      <div class="card-video card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
        </div>
        <div class="card-body">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://player.vimeo.com/video/12345567896?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>
          </div>
        </div>
      </div>
     
    </div>

    <div class="col-4">
    
      <div class="card-chat card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Chat Items</h4>
        </div>
        <div class="card-body p-0" id="chatItems">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
      </div>

    </div>
    
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

推荐阅读