如何在具有固定页眉和页脚的 HTML 布局中使用水平滚动条显示全部内容？答案

【问题标题】：How to show full contents with horizontal scrollbar in an HTML layout with fixed header and footer?如何在具有固定页眉和页脚的 HTML 布局中使用水平滚动条显示全部内容？
【发布时间】：2019-10-02 09:58:26
【问题描述】：

我的 HTML 布局有固定的页眉和页脚。中间容器由左窗格（也是固定位置）和右窗格组成。右窗格是显示内容的区域，应该可以根据屏幕大小显示垂直和水平滚动条。

这是我的测试小提琴：https://jsfiddle.net/mo0rjye3/2/

当我调整屏幕宽度时，表格向左移动，并且某些部分被隐藏了。

期望：表格应该完全显示，水平滚动条，同时它应该在为右窗格分配的空间中居中（宽度将根据最宽的内容动态计算）。比如右窗格的宽度可以是1200px，里面的内容要居中对齐。

如果我不使用div-centered 类中的display: flex，表格将按预期显示。

【问题讨论】：

标签： javascript html css

【解决方案1】：

删除主要和侧边栏左侧的位置。将 display:flex 添加到容器中。将表格中的 div 显示为块。将一些引导 col 类添加到容器、主和侧边栏以获取样式。请参考小提琴。

#sidebar-left{  
  margin-top: 30px;
  min-width: 230px;
  height: 87vh !important;
  min-height: 50vh !important;
  background-color: coral;
  overflow: auto;
  overflow-x: hidden;
  z-index: 1;
}

#main{
    background-color: lightgray;  
    overflow-x: auto;
    max-height: 87vh !important;
    min-height: 87vh !important;
    min-width: 300px;
    height: 87vh !important;  
}

#container{
  display: flex;
}

https://jsfiddle.net/bL3h1gvu/

【讨论】：