jquery - Bootstrap 中管理仪表板模板的高度修复

Question

我在 Bootstrap 中使用管理仪表板模板，我需要帮助。 从上图中可以看出，我有一个固定的侧边栏和主页内容包装器。主页内容的 ID 为“page-wrapper”。问题是这个:

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff;
}

这个可以自动调整页面包装器的高度，适用于具有多个记录的表(假设还没有分页)。但是，它不适用于记录很少的表。那里的黑色部分将填满空白区域。我试过设置高度:

#page-wrapper {
    width: 100%;
    height: 700px;
    padding: 0;
    background-color: #fff;
}

但随着我继续开发此 Web 应用程序，我只是觉得高度不固定，因为将来我会在其中添加更多测试数据。有人能帮帮我吗？谢谢。

我试过了

#wrapper, #page-wrapper{
      position: absolute;
}

但是页面包装器缩小并在类(class)旁边留下一个黑色空间。 (更新)

Answer 1

据我了解，您想设置 page-wrapper 填充所有页面，但高度不固定。因此，您需要将 page-wrapper 的父级设置为其容器的全高。

假设，body 是#page-wrapper 的父级。试试这个:

html, body {
height: 100%;
}

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff;
    height: 100%;
}