Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends all the way down to the bottom, creating excessive white space on the page. I aim to make this layout more responsive so that it dynamically adjusts its height based on the content. As I am not well-versed in frontend development, I am unsure whether this issue pertains to HTML or CSS. I have tried searching for solutions but have been unable to find relevant keywords to address my problem. I hope I have effectively communicated the issue.
View Image: https://i.sstatic.net/4Vv6A.jpg
The problematic section is highlighted below:
https://i.sstatic.net/SYJi5.png
The HTML code for the pink part is as follows:
<div class="col-md-3 top-nav">
<div class="logo">
<a href="index.html"><h1>Alperen Öz</h1></a>
</div>
<div class="top-menu">
<span class="menu"> </span>
<ul class="cl-effect-16">
<li><a class="active" href=""~/Homepage/home" data-hover="Anasayfa">Anasayfa</a></li>
<li><a href="#" data-hover="Fotoğraf Galerisi">Fotoğraf Galerisi</a></li>
<li><a href="#" data-hover="Hakkımda">Hakkımda</a></li>
</ul>
<!-- script-for-nav -->
<!-- script-for-nav -->
<ul class="side-icons">
<li><a class="fb" href="#"></a></li>
<li><a class="twitt" href="#"></a></li>
<li><a class="goog" href="#"></a></li>
<li><a class="drib" href="#"></a></li>
</ul>
</div>
</div>
@RenderBody()
<div class="clearfix"> </div>
</div>
Thank you in advance for your assistance! :)