I am currently working on creating a website with a store-like layout, and I have been facing an issue while implementing a sidebar for the categories. No matter what I try, I can't seem to make the sidebar height reach the end of the page. It remains too small even after resizing.
I've experimented with adjusting the height property but haven't found a solution yet. I attempted using position: fixed, but that caused the sidebar to overlap with my header. My goal is to have the sidebar extend all the way down to the bottom of the page, regardless of resizing.
#categories ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 205px;
background-color: orange;
float: left;
height: 100vh;
}
#categories li h2{
text-align: center;
}
#categories li a{
display: block;
color: black;
padding: 15px 35px;
text-decoration: none;
}
#categories li a:hover{
background-color: black;
color: white;
}
/* ----------------------------------------------------------------------------------------- */
#products{
background-color: darkred;
border-style: solid;
}
#products ul{
list-style-type: none;
}
#products li{
padding-bottom: 75px;
border-bottom: solid;
}
#products li img{
width: 227px;
float: left;
}<body>
<div id="categories">
<ul>
<li><h2> Larem Ipsum </h2></li> <!-- Category Titles -->
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#6">5</a></li>
</ul>
</div>
<div id="products">
<ul>
<li>
<img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
<h2> Lorem ipsum dolor sit amet </h2>
<h3> Lorum Ipsum Cacetes Cacetinhos! </h3>
<h1> 3.99€ </h1>
</li>
<li>
<img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
<h2> Lorem ipsum dolor sit amet </h2>
<h3> Quisque sapien ligula, gravida ac magna ac, </h3>
<h1> €€€ </h1>
</li>
<li>
<img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
<h2> Lorem ipsum dolor sit amet </h2>
<h3> Quisque sapien ligula, gravida ac magna ac, </h3>
<h1> €€€ </h1>
</li>
<li>
<img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
<h2> Lorem ipsum dolor sit amet </h2>
<h3> Quisque sapien ligula, gravida ac magna ac, </h3>
<h1> €€€ </h1>
</li>
<li>
<img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
<h2> Lorem ipsum dolor sit amet </h2>
<h3> Quisque sapien ligula, gravida ac magna ac, </h3>
<h1> €€€ </h1>
</li>
</ul>
</div>
</body>Link to the fiddle: https://jsfiddle.net/r4jp8ocn/