时间戳

首页 > 解决方案 > Bootstrap4，如何将可滚动列的高度限制为响应式嵌入列的高度？

css - Bootstrap4，如何将可滚动列的高度限制为响应式嵌入列的高度？

问题描述

我有一个 3 列的 bootstrap 4 布局，中间列有两个嵌套列。一个是具有响应大小的嵌入式 youtube 视频，另一个是带有滚动条的文本列表。我想将可滚动列的高度（红色背景）设置为嵌入响应视频的高度，并使其可调整大小和响应，以防设备宽度不足，它应该折叠在视频下方。代码在这里https://jsfiddle.net/h7f8r1ut/

请建议是否可以在没有 javascript 代码的情况下实现这一点。

我查看了类似的问题，但无法找到适合我确切要求的解决方案。

.scroll {
  text-align: left;
  height: 40vh;
  overflow: hidden;
  overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <div class="container-fluid">
    <div class="row">

      <div class="col-md-2 bg-dark text-info">
        left sidebar
      </div>
      <div class="col-md-8 bg-secondary">
        <div class="container-fluid">
          <div class="row">

            <div class="col-md-10" id="video">
              <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
              </div>
            </div>
            <div class="col-md-2 scroll bg-danger">
              <p>1</p>
              <p>2</p>
              <p>3</p>
              <p>4</p>
              <p>5</p>
              <p>6</p>
              <p>7</p>
              <p>8</p>
              <p>9</p>
              <p>10</p>
              <p>11</p>
              <p>12</p>
              <p>13</p>
              <p>14</p>
              <p>15</p>
              <p>16</p>
              <p>17</p>
              <p>18</p>
              <p>19</p>
              <p>20</p>
              <p>21</p>
              <p>22</p>
              <p>23</p>
              <p>24</p>
              <p>25</p>
              <p>26</p>
              <p>27</p>
              <p>28</p>
              <p>29</p>
              <p>30</p>
              <p>31</p>
              <p>32</p>
              <p>33</p>
              <p>34</p>
              <p>35</p>
              <p>36</p>
              <p>37</p>
              <p>38</p>
              <p>39</p>
              <p>40</p>
              <p>41</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2 bg-dark text-info">
        right sidebar
      </div>
    </div>

  </div>
</div>

标签： csstwitter-bootstrapbootstrap-4

解决方案

您需要将可滚动内容放在position:absolute父级中，然后overflow:auto在列上设置。Bootstrap 4.3 和更新版本中包含了用于此目的的实用程序类。

              <div class="container-fluid">
                  <div class="row">
                        <div class="col-md-10" id="video">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
                            </div>
                        </div>
                        <div class="col-md-2 overflow-auto bg-danger">
                            <div class="position-absolute">
                                <p>1</p>
                                <p>2</p>
                                ....
                            </div>
                        </div>
                   </div>
              </div>

https://www.codeply.com/go/W0onIeqkRy

编辑：

如果您只想在较大的屏幕宽度（md 及以上）上滚动行为，您可以使用媒体查询：

@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}

推荐阅读