如何让侧边栏占据整个页面高度？

【问题标题】：How do I make sidebar take up the whole page height?如何让侧边栏占据整个页面高度？
【发布时间】：2021-04-29 11:59:41
【问题描述】：

您好，下面的代码会生成一个带有一些 lorem 文本和侧边栏的 Bootstrap 页面，但是当页面内容的高度小于窗口的大小时，侧边栏不会垂直填充屏幕我如何使高度考虑到页面内容可以大于 100vh，侧边栏垂直填充屏幕。 （要查看问题，您必须查看整页预览）

.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>

【问题讨论】：

    标签： html css bootstrap-5


    【解决方案1】：

    将此添加到您的 css 代码 .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>

    【讨论】：

    • 但是页面大小可以大于100vh
    • @qwertyuiop 不，100vh 表示网页高度的 100%，无论网页大小
    【解决方案2】：

    正确的方法是在主体上使用d-flex flex-column vh-100，然后在容器上使用flex-grow-1。然后将该行设置为h-100，使其填充容器的高度...

    <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

    另外，去掉内部的container-fluids——那里什么都不做，不建议嵌套容器。

    相关：v4 bootstrap full height sidebar

    【讨论】：

      【解决方案3】：

      一个完整的页面称为'viewport'，您可以根据CSS3中的viewport设计一个元素。

      这样的单位称为视口百分比长度，与初始包含块的大小有关。

      • 视口高度称为vh。页面的完整高度是 100vh。
      • 视口宽度称为vw。页面的完整高度是 100 辆。
      • 还有vmin（视口最小长度）和vmax（视口 最大长度）。

      现在，您可以通过在 CSS 中添加以下内容轻松解决您的问题：

      .sidebar { 
  height: 100vh;
}

      这里是信息about the Viewport-relative lengths

      那么完整的代码是：

      .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>

      由于您的侧边栏未嵌入任何尺寸受限的元素中，因此即使height: 100% 也适用于您的情况。

      希望我能帮上忙

      【讨论】：

        猜你喜欢
        • 2020-10-26
        • 1970-01-01
        • 1970-01-01
        • 2013-11-29
        • 2020-01-01
        • 1970-01-01
        • 2010-11-16
        • 1970-01-01
        • 2019-11-11
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode