How do I make sidebar take up the whole page height?

Question

Hello the code below generates a Bootstrap page with some lorem text and a sidebar however when the height of the pages content is small than the size of the window the sidebar does not fill the screen vertically how do I make the height of the sidebar fill the screen vertically taking into account that the content of the page can be bigger than 100vh. (To see the issue you have to view the full page preview)

.sidebar-user-box {
    padding: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Social Media Site</title>
</head>

<body>

  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Social Media Site</a>
      <div class="d-flex align-items-center">
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: white;">
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
          </div>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: gray;">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
          </div>
        </div>
      </main>
      <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item sidebar-user-box" id="1">
              <span id="slider-username">User</span>
            </li>
            <li class="nav-item sidebar-user-box" id="2">
              <span id="slider-username">User (2)</span>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</body>

</html>

score 1 · Answer 1 · answered Mar 18 '21 at 22:17

Add this to your css code .sidebar { height: 100vh;}

.sidebar-user-box {
    padding: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}
.sidebar { height: 100vh;}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Social Media Site</title>
</head>

<body>

  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Social Media Site</a>
      <div class="d-flex align-items-center">
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: white;">
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
          </div>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: gray;">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
          </div>
        </div>
      </main>
      <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item sidebar-user-box" id="1">
              <span id="slider-username">User</span>
            </li>
            <li class="nav-item sidebar-user-box" id="2">
              <span id="slider-username">User (2)</span>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</body>

</html>

@qwertyuiop no, 100vh means its 100% of the webpage's height no matter how big or small the webpage is — I_love_vegetables, Apr 29 '21 at 04:11
@I_love_vegetables It is actually 100% of the "window's" height, which means if you have a vertically scrolling page the menu will only go to the bottom of the screen at the point before you start scrolling. — Sam, May 03 '23 at 20:58

score 1 · Answer 2 · answered Mar 19 '21 at 11:13

The correct way would be to use d-flex flex-column vh-100 on the body, and then flex-grow-1 on the container. Then set the row to h-100 so it fill the height of the container...

<body class="d-flex flex-column vh-100">
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Social Media Site</a>
        <div class="d-flex align-items-center">
        </div>
    </div>
</nav>
<div class="container-fluid flex-grow-1">
    <div class="row h-100">
        <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
            <div class="row">
                <div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
                <div class="col-md-4 col-sm-4" style="background-color: white;">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
                </div>
                <div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
            </div>
            <div class="row">
                <div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
                <div class="col-md-4 col-sm-4" style="background-color: gray;">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
                </div>
                <div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
            </div>
        </main>
        <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item sidebar-user-box" id="1">
                        <span id="slider-username">User</span>
                    </li>
                    <li class="nav-item sidebar-user-box" id="2">
                        <span id="slider-username">User (2)</span>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
</body>

https://codeply.com/p/WyZu1eBAfQ

Also, remove the inner container-fluids -- there not doing anything and it's not recommended to nest containers.

Related: v4 bootstrap full height sidebar

SK-the-Learner · Answer 3 · 2021-04-29T03:59:41.410

A full page is called a 'viewport' and you can design an element according to its viewport in CSS3.

Such units are called viewport-percentage lengths and are relative to the size of the initial containing block.

Viewport-Height is called vh. The complete height of a page is 100vh.
Viewport-Width is called vw. The complete height of a page is 100vw.
There also exist vmin (viewport minimum length) and vmax (viewport maximum length).

So now, your problem can easily be solved by adding the following to your CSS:

.sidebar { 
  height: 100vh;
}

Here is information about the Viewport-relative lengths

The complete code then would be:

.sidebar-user-box {
    padding: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}
.sidebar { 
  height: 100vh;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Social Media Site</title>
</head>

<body>

  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Social Media Site</a>
      <div class="d-flex align-items-center">
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: blue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: white;">
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: blue;"></div>
          </div>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-4" style="background-color: darkblue;"></div>
            <div class="col-md-4 col-sm-4" style="background-color: gray;">
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate in? </p>
            </div>
            <div class="col-md-3 col-sm-3" style="background-color: darkblue;"></div>
          </div>
        </div>
      </main>
      <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item sidebar-user-box" id="1">
              <span id="slider-username">User</span>
            </li>
            <li class="nav-item sidebar-user-box" id="2">
              <span id="slider-username">User (2)</span>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</body>

</html>

Since your sidebar is not embedded in any size-constrained element, even height: 100% would work in your case.

Hope I could help

How do I make sidebar take up the whole page height?

3 Answers3