Question

我有一个带有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>

Answer 1

您需要将可滚动内容放在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;
    }
}

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

1 个答案: