CODEWITHSUNDEEP
htmlcssbootstrap-4
chobo2
chobo2

Reputation: 85765

How to Set Column Heights - Bootstrap 4?

I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".

I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner.

If you do full screen on my code you will see it.

body,
html,
.container-fluid {
  height: 100%;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  background-color: blue;
  color: white;
}

@media (max-width: 768px) {
  #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>test</title>

  <!-- Bootstrap CSS CDN -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style4.css">
</head>

<body>
  <div class="wrapper h-100">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
      </div>

      <ul class="list-unstyled components">
        <li>
          <a>
                        Home
                    </a>
        </li>
      </ul>
    </nav>

    <div class="container-fluid ">
      <div class="row h-100">
        <div class="col-12" style="background-color: red;">
          One of three columns
        </div>
        <main class="col-12 h-100" style="background-color: yellow;">
          test
        </main>
        <div class="col-12" style="background-color: pink;">
          test2
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Views: 4132

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

The problem currently is the that using h-100 on the row, makes the child col-12 also set to h-100 exceed the viewport height which causes scrolling and the whitespace under the sidebar.

As of Bootstrap 4.1, there is a flex-fill util class that is helpful for this layout...

.flex-fill {
  flex: 1 1 auto;
}

In this case, you can use it so that the child divs grow to fill remaining height. Just set min-height on the .wrapper:

.wrapper {
    min-height: 100vh;
}

And then, make container-fluid also a flexbox container (using d-flex). Use the util flex-fill to make row and the middle col-12 fill height:

<div class="wrapper d-flex">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
        </div>
        <ul class="list-unstyled components">
            <li>
                <a>
                    Home
                </a>
            </li>
        </ul>
    </nav>
    <div class="container-fluid d-flex flex-column">
        <div class="row flex-fill flex-column">
            <div class="col-12" style="background-color: red;">
                One of three columns
            </div>
            <main class="col-12 flex-fill" style="background-color: yellow;">
                test
            </main>
            <div class="col-12" style="background-color: pink;">
                test2
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/VvogWj44cS

Upvotes: 2

Related Questions