如何让Bootstrap 4右侧导航栏高度设为100%？

我来帮你搞定这个右侧导航栏占满高度的问题～你遇到的核心问题是百分比高度的生效依赖父元素的高度定义，直接给<nav>加height:100%是没用的，因为它的父元素（比如body、html）默认没有设置高度，另外用float:right的布局方式也不太适配Bootstrap的响应式体系，咱们一步步来改：

问题根源 #

• 块级元素的height:100%需要父元素明确设置高度，否则浏览器无法计算百分比对应的实际像素值
• float布局会脱离文档流，很难让元素自然占满父容器高度

解决方案步骤 #

1. 先给根元素设置全屏高度
   给html和body添加样式，确保它们占满浏览器视口高度：

   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   

2. 改用Bootstrap的Flex布局体系
   放弃float:right，用Bootstrap的container、row和col类来构建布局，这样导航栏可以自然继承父容器的高度：

3. 给导航栏添加全屏高度样式
   给<nav>设置height:100%，同时可以加overflow-y:auto让内容超出时滚动，避免页面混乱。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .full-height-container {
      height: 100%;
    }
    .sidebar-nav {
      width: 200px;
      height: 100%;
      overflow-y: auto; /* 内容过多时可以滚动 */
    }
  </style>
</head>
<body>
  <div class="container-fluid full-height-container">
    <div class="row h-100">
      <!-- 主内容区域 -->
      <div class="col">
        这里是你的主内容
      </div>
      <!-- 右侧导航栏 -->
      <nav class="navbar navbar-light bg-light sidebar-nav">
        <ul class="nav flex-column">
          <li class="nav-item active">
            <a class="nav-link" href="#">Sports</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Facebook</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Youtube</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

代码说明 #

• html, body { height:100% }：确保根元素占满视口高度
• container-fluid和row h-100：让布局容器和行占满父元素高度
• sidebar-nav类：设置导航栏宽度和100%高度，overflow-y:auto保证内容过多时不会撑破布局
• 用Bootstrap的网格系统替代float，更符合框架的设计逻辑，也能保证响应式效果

内容的提问来源于stack exchange，提问作者user1773603