nickywan123
1 week ago

how to make sidebar height fit with content?

Posted 1 week ago by nickywan123

I am using a sidebar (from CoreUI) and I have a body of content, let say it's show number of items I ordered. The more items I order, the more the body of content "height" will be.

My sidebar looks something like below:

<div class="wrapper" style="height: 100%;">
 <div class="sidebar sidebar-bg-color">
    <nav class="sidebar-nav" >
        <ul class="nav" style="margin-top: 2rem;">

         
            <li class="nav-item" >
              <div class="icon-text-align">
                 <a class="nav-link " href="{{route('shop.customer.orders')}}">
                    <img class="img-avatar" src="{{asset('/storage/customer/sidebar-icons/value-records.png')}}" alt="My Orders" style="height: 100px; width: 100px; ">
                 </a>          
             </div>
            </li>
         
  
            <li class="nav-item">
             <div class="icon-text-align">
                 <a class="nav-link" href="{{route('shop.wishlist.home')}}">
                    <img class="img-avatar" src="{{asset('/storage/customer/sidebar-icons/perfect-list.png')}}" alt="Wish List" style="height: 100px; width: 100px; ">
                 </a>
           
            </div>
            </li>
        
            
            <li class="nav-item" >
              <div class="icon-text-align">
                 <a class="nav-link" href="/shop">
                  <img class="img-avatar" src="{{asset('/storage/customer/sidebar-icons/continue-shopping.png')}}" alt="Shop" style="height: 100px; width: 100px; ">
                 </a>
                
              </div>          
            </li>

Style:

   .sidebar{
       height: 1160px;
   }

Now I tried changing height to 100% but it doesn't make any difference as my sidebar is of black background color and only fill "half" of the screen. How do I make it fit as content increases?

Please sign in or create an account to participate in this conversation.