Bootstrap 4.0.0侧边栏问题：如何避免展开时垂直延伸？

我来帮你搞定这个侧边栏展开时垂直延伸的问题！先梳理下你的场景：你用Bootstrap 4.0.0搭建网站的垂直菜单侧边栏，通过点击按钮切换fliph类实现展开/收起，但展开时侧边栏会往下延伸超出预期对吧？

先把你现有的代码整理出来方便参考：

现有JS代码 #

$(document).ready(function() { 
  $('button').click(function() { 
    $('.sidebar').toggleClass('fliph'); 
  }); 
});

现有CSS代码 #

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; }
html, body { width: 100%; height: 100% }
/* 你这里的article等标签样式未写完，暂保留现有部分 */

接下来给你几个实战常用的解决方案，针对性解决垂直延伸问题：

• 固定侧边栏高度并添加滚动条
  这是最直接的处理方式，给侧边栏设置固定的视口高度，让超出的内容滚动而不是撑开容器：

  .sidebar {
    height: 100vh; /* 占满整个视口高度 */
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
    position: fixed; /* 可选，让侧边栏固定在左侧不随页面滚动 */
    top: 0;
    left: 0;
  }
  

• 用Bootstrap Flex布局约束整体高度
  利用Bootstrap的Flex类构建等高布局，确保侧边栏和主内容区始终占满页面高度，不会被内容撑开：

  <!-- 页面整体采用Flex布局 -->
  <div class="d-flex h-100">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">菜单标题</div>
      <!-- 菜单列表单独设置滚动 -->
      <div class="menu-list flex-grow-1 overflow-y-auto">
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link" href="#">菜单项1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">菜单项2</a></li>
          <!-- 更多菜单项 -->
        </ul>
      </div>
      <div class="sidebar-footer">底部内容</div>
    </div>
    <!-- 主内容区自动填充剩余空间 -->
    <main class="flex-grow-1 p-3">
      主内容区域
    </main>
  </div>
  

• 检查fliph类的样式设置
  确保切换的fliph类只修改宽度、位置这类属性，不要改动高度相关设置，保持侧边栏高度和收起时一致：

  .fliph {
    width: 60px; /* 示例收起后的窄宽度 */
    transition: width 0.3s ease; /* 可选，添加过渡动画提升体验 */
  }
  

• 单独约束菜单内容高度
  如果侧边栏包含很长的菜单列表，给菜单容器单独设置高度限制，避免撑开整个侧边栏：

  .sidebar .menu-list {
    max-height: calc(100vh - 100px); /* 减去侧边栏头部和底部的高度 */
    overflow-y: auto;
  }
  

这些方法的核心思路是固定侧边栏的高度范围，让超出内容滚动而不是撑开容器，再配合Bootstrap的布局类维持页面整体高度一致性，基本就能解决垂直延伸的问题了。

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