Question

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>

Answer 1

目前的问题是在h-100上使用row，会使孩子col-12也设置为h-100超过视口高度，从而导致滚动和下方的空白侧边栏。

从 Bootstrap 4.1 开始，有一个flex-fill util类对此布局有帮助...

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

在这种情况下，您可以使用它以便子div增长以填充剩余高度。只需在.wrapper上设置最小高度：

.wrapper {
    min-height: 100vh;
}

然后，将container-fluid设为flexbox容器（使用d-flex）。使用util flex-fill制作row和中间col-12填充高度：

<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

How to Set Column Heights - Bootstrap 4?

1 个答案: