时间戳

首页 > 解决方案 > Bootstrap 4 最小页面/侧边栏高度

html - Bootstrap 4 最小页面/侧边栏高度

问题描述

我的代码如下所示：

<div class="container-fluid">
    <div class="row">
        <nav>...</nav> <!-- sidebar -->
        <main role="main">
            <!-- content -->
        </main>
    </div>
</div>

我正在尝试设置最小高度，因为当内容太短时，侧边栏看起来像这样：

在此处输入图像描述

注意图像的空白底部

将html, body, .container-fluid, .row高度设置为 100% 可以在此页面上解决此问题，但会破坏内容超过 100% 的页面（侧边栏再次太短，但这次它（仅）是屏幕高度的 100%）：

在此处输入图像描述

那是我滚动后的侧边栏，它不会超过 100%。

我希望侧边栏在内容短于屏幕时具有 1OO% 的高度，并且在内容长于屏幕时与内容一样高。如何设置侧边栏（或 .container-fluid）的最小高度？ nav { min-height: 100%; }也没有用。似乎 min-height 在 CSS3 中的工作方式非常奇怪。

JSFiddle：http: //jsfiddle.net/uc9gm2ke/3/

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

您不需要添加任何额外的 CSS，此 HTML 可以完美运行。

HTML

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Dashboard</title>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <nav class="col-12 col-md-3 col-lg-2   navbar navbar-expand-md   navbar-dark bg-dark   pt-md-3 pl-md-2 pl-xl-3   d-md-block"> <!-- d-flex -->
          <a class="navbar-brand" href="#">
            <i class="fas fa-cog"></i> Administration
        </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
          <div class="navbar-collapse collapse mt-md-1" id="sidebar">
            <ul class="navbar-nav d-block mr-auto">
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link active" href="#">
                Dashboard <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link" href="#">
                Orders
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-12 col-md-9 col-lg-10 px-4">
          some content
          <!-- when you uncomment code below, it works -->
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a
          lot of content
        </main>

      </div>

    </div>
  </body>

</html>

推荐阅读