为Panel设置overflow:scroll属性但滚动条不显示问题求助

让我仔细梳理下你的代码结构，问题大概率出在外层的table布局干扰了内部元素的高度计算上。咱们一步步来排查和修复：

核心问题分析 #

你的.panel-body明明设置了height:700px和overflow:scroll，却没触发滚动条，主要有两个原因：

1. 包裹.panel的.row用了display:table-cell;vertical-align: middle，table-cell类型的元素会自动拉伸以适应内容或父容器，导致.panel-body的高度设置没被正确识别；
2. aside的position:absolute如果缺少对应父级的定位约束（比如html、body未设置height:100%），它的height:100%也无法基于视口正确计算高度。

修复方案 #

这里提供两种可行的修复方式，你可以根据自己的布局需求选择：

方案一：调整table布局的高度约束 #

给包含.panel的外层div.row和.panel都加上height:100%，同时用calc()计算.panel-body的可用高度，避免被头部遮挡：

<aside class="col-md-3 pull-left" style="display:table;position: absolute;height: 100%;">
  <div class="row" style="display:table-cell;vertical-align: middle; height: 100%;">
    <div class="panel panel-primary" style="height: 100%;">
      <div class="panel-heading">
        <h3 class="panel-title">Panel 1</h3>
        <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
      </div>
      <div class="panel-body" style="height: calc(100% - 60px); overflow:auto;">
        <!-- Panel内容（含数学公式等）-->
      </div>
    </div>
  </div>
</aside>

• calc(100% - 60px)是减去.panel-heading的大致高度，保证.panel-body不会超出面板范围；
• 把overflow:scroll换成overflow:auto更灵活，只有内容超出时才显示滚动条。

方案二：移除table布局，改用Flex实现垂直居中 #

如果不需要table布局，用Flex来做垂直居中会更简洁，还能避开table布局的高度计算坑：

<aside class="col-md-3 pull-left" style="position: absolute;height: 100%; display: flex; align-items: center;">
  <div class="row" style="width: 100%;">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel 1</h3>
        <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
      </div>
      <div class="panel-body" style="height:700px; overflow:auto;">
        <!-- Panel内容（含数学公式等）-->
      </div>
    </div>
  </div>
</aside>

• display:flex + align-items:center可以轻松实现垂直居中，完全不会干扰内部元素的高度设置；
• 保持.panel-body的height:700px，内容超出时滚动条会正常显示。

额外注意事项 #

别忘了给html和body加上样式：

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

否则aside的height:100%无法基于整个视口计算高度，布局还是会出问题。

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