bootstrap 3 内部高度自适应窗口

Bootstrap 3 中内部高度自适应窗口的实现需要使用一些 CSS 技巧。

一种常见的实现方式是使用绝对定位和 top、bottom 属性，将内容区域的高度设置为父容器的高度减去固定高度的头部和底部。例如：

<div class="container">
  <div class="header">头部内容</div>
  <div class="content" style="position: absolute; top: 50px; bottom: 50px; overflow: auto;">
    内容区域，可以滚动。
  </div>
  <div class="footer">底部内容</div>
</div>

其中，头部和底部的高度为 50px，内容区域使用绝对定位，设置 top 和 bottom 属性为 50px，overflow 属性为 auto，可以自适应高度，并且当内容超出高度时，会自动出现滚动条。

另一种实现方式是使用 Flexbox 布局，将父容器设置为 Flex 容器，设置 flex 属性为 1，使子元素自适应高度。例如：

<div class="container d-flex flex-column">
  <div class="header">头部内容</div>
  <div class="content flex-grow-1 overflow-auto">
    内容区域，可以滚动。
  </div>
  <div class="footer">底部内容</div>
</div>

其中，父容器设置为 Flex 容器，并设置 flex 属性为 1，使子元素自适应高度。内容区域使用 flex-grow-1 属性，表示占据剩余空间。overflow 属性为 auto，可以自动出现滚动条。