两列并排滚动

Question

我的页面看起来像这样

我有两个单独的 div，一个是产品过滤器，另一个是产品 div。产品内容可以显示 40 个产品或 100 个或不显示，即内容可以稍后更改。同样，我有长度可以变化的过滤器.我希望以某种方式使过滤器 div 可滚动并使其高度取决于产品 div 的内容。

还有一件事，如果产品 div 有更多内容并且过滤器高度小于产品 div，那么在向下滚动时过滤器应该保持原状，直到滚动到产品 div 的末尾。

例如，如果产品 div 的高度是 500 Px，那么过滤器 div 的高度应该是 500px，并且任何溢出都应该是可滚动的。

我试过的：

<div class="container">
<div class="row">
<div class="col-md-3"   style="margin-top:30px;overflow-y:scroll;height:100%">
</div>
<div class="col-md-9" >
</div>
</div>
</div>

这没有为我提供预期的结果。我对此的方法是什么，解决方案是什么？

我试图模仿YouTube的基本结构。

Answer 1

我从您的问题中看到您正在使用我不太熟悉的 Bootstrap 类，但这里有一种使用 CSS Flexbox 模块和其他响应式 CSS 技术的解决方案：

.container {
position: relative;
width: 98%;
}

.navbar {
height: 30px;
background-color:rgb(255,0,0);
}

.product-filter {
display:block;
position:absolute;
top:30px;
left:0;
width:20%;
height: calc(100% - 30px);
overflow-y: auto;
background-color:rgb(127,255,127);
}

.product-filter ul {
margin-left:0;
padding-left:0;
list-style:none;
}

.product-filter li {
display:block;
margin: 0 auto;
width:80%;
margin-bottom:6px;
padding:6px 0;
color:rgb(255,255,255);
font-weight:bold;
text-align:center;
background-color:rgb(0,163,0);
border:2px solid rgb(255,255,255);
}

.products {
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
flex: 1 0 80%;
margin-left:20%;
background-color:rgb(255,255,0);
}

.product {
width:100px;
height:100px;
margin: 12px;
background-color:rgb(255,191,0);
}

<div class="container">
<div class="navbar"></div>

<div class="product-filter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
</div>

<div class="products">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>