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;
}

但是随着我继续在这个网络应用程序上开发，我感觉不是一个固定的高度，因为我将在其中添加更多的测试数据。有人能帮帮我吗？谢谢。

我试过

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

但是页面包装器收缩并在课程旁留下一个黑色空间。（更新）

Answer 1

根据我的理解，您正在尝试修复左侧栏

对于桌面和小型设备我也没有什么建议来处理目的地。

桌面：计算窗口viewpoert的高度，并将相同的高度设置为下一列。这样做首先获取窗口高度并将其存储到变量然后分配你的左侧边栏并完成:) 两者总是相同的高度

Tab或Mob /基本上小型设备：作为UX透视图，用户应该始终可以访问导航标签，这样您就可以使用汉堡包菜单，或者将其作为图标顶部或底部放置像任何应用程序一样的屏幕。

作为参考你可以点击这个链接来集成高度 http://api.jquery.com/height/

谢谢你：）

Answer 2

据我了解，你想设置页面包装器填充所有页面没有固定的高度。因此，您需要将page-wrapper的父级设置为其容器的完整高度。

Asssume，body是#page-wrapper的父级。试试这个：

html, body {
height: 100%;
}

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