两列并排可滚动 [英] two columns side by side scrollable

问题描述

我的页面看起来像这样

我有两个单独的div，一个是产品过滤器，另一个是产品div.产品内容可以显示40个产品或100个产品或不显示任何产品，即内容以后可以更改.类似地，我有一个过滤器，其长度可以也有所不同.我希望通过某种方式使过滤器div可滚动，并使其高度取决于产品div的内容.

I have two seperate divs one being the product filter while the other is the products div.The products content can display either 40 products or 100 or none, i.e. content can change later on.Similarly, i have the filter whose length can vary as well.What i was hoping to somehow make the filter div scrollable and making it's height depending on the content of the products div.

还有一件事，如果产品div的内容更多，并且过滤器高度小于产品div，则在向下滚动时，过滤器应保持放置状态，直到滚动滚动到产品div的末尾为止.

One more thing, if the products div has more content and the filter height is less than the products div then while scrolling down the filter should stay put untill the scroll comes to the end of the products div.

例如，如果product div的高度为500 Px，则过滤器div的高度应为500px，并且任何溢出都应可滚动.

For example , if the height of the product div is 500 Px then the filter div should have a height of 500px and any overflow should be scrollable.

我尝试过的事情:

<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>

这不能为我提供预期的结果.我对此采取的方法是什么?解决方案是什么?

This doesn't provide me the expected results.What would be my approach towards this and what would be the solution?

我正在尝试模仿 YouTube 的基本结构.

I am trying to mimic the basic structure of YouTube.

推荐答案

我从您的问题中看到您正在使用Bootstrap类，对此我不太熟悉，但这是使用CSS Flexbox模块和其他响应式方法的解决方案CSS技术:

I see from your question you are using Bootstrap classes, which I am less familiar with, but here is an approach to a solution using CSS Flexbox module and other responsive CSS techniques:

.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>

这篇关于两列并排可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！