我的页面看起来像这样
我有两个单独的 div，一个是产品过滤器，另一个是产品 div。产品内容可以显示 40 个产品或 100 个产品或无，即内容可以稍后更改。同样，我的过滤器的长度也可以变化.我希望以某种方式使过滤器 div 可滚动，并使其高度取决于产品 div 的内容。
另一件事是，如果产品 div 具有更多内容并且过滤器高度小于产品 div，则向下滚动时过滤器应保持不变，直到滚动到产品 div 的末尾。
例如，如果产品 div 的高度为 500 像素，则过滤器 div 的高度应为 500 像素，并且任何溢出都应可滚动。
我尝试了什么：
<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 http://www.youtube.com.
我从你的问题中看到你正在使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
