Bootstrap Sidebar is not getting the right height

Question

I'm trying to make a typical sidebar at the left of my template. I'm using bootstrap 4.

This is the code:

    <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color:#6c757d;">
    <div class="dashboard-sidebar js-sticky top-0 px-3 px-md-4 px-lg-4 overflow-auto">
        <ul class="sidebar navbar-nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file"></span>
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="shopping-cart"></span>
              Products
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="users"></span>
              Customers
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="bar-chart-2"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="layers"></span>
              Integrations
            </a>
          </li>
        </ul>
    </div>
</nav>

Why is it not showing properly the Y size? I want it to be responsive, please do not e.g. style="height:1280px;". I just want it to be displayed from the navbar to the very bottom of the screen. I'm copying examples from bootstrap but it is not working. What am I doing wrong?

first because of your navbar is fixed so you should margin/padding sidebar from by the same value of navbar height , then if you need sidebar to take full height you can do make its hegiht to be `height:100vh` — Ahmed El-sayed, Nov 03 '19 at 15:21
sorry i noticed that the sidebar itself is fixed by using this class `js-sticky` so remove this class `top-0` and right custom value for `top` to be equal the same of navbar height ex: `top:50px` — Ahmed El-sayed, Nov 03 '19 at 15:24
It worked! Thank you very much. I did Height:100vh and margin-top:58px; — Gonzalo Dambra, Nov 03 '19 at 15:32

score 0 · Answer 1 · answered Nov 03 '19 at 15:19

0

try some css on that component so it will always have the height of the view

.dashboard-sidebar {
    height: 100%;
}

answered Nov 03 '19 at 15:19

chris

2,490
4
32
56

score -2 · Accepted Answer · answered Nov 03 '19 at 15:34

The solution:

<nav class="team-left-column col-md-4 col-lg-2 position-fixed" style="background-color:#6c757d;height:100vh;margin-top: 58px;">

I had to use height:100vh and margin-top. Also I made it position-fixed in order to not to get scrolled content of the sidebar when I'm scrolling the main container.

Bootstrap Sidebar is not getting the right height

2 Answers2