BOTJr. BOTJr. - 22 days ago 6
CSS Question

two columns side by side scrollable

My page looks something like this

enter image description here

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.

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.

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.

What i tried :

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

I am trying to mimic the basic structure of YouTube.

Answer

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>

Comments