如何让引导内容包含在浏览器高度的两列中

Question

我遇到了一个看似很常见但略有不同的问题。

我正在为我的 Web 应用程序使用 bootstrap。 layout/master 主页面有一个顶部栏（用于操作）和一个左侧导航栏（当然用于应用程序页面之间的导航）。所以，页面的内容总是在屏幕的 "bottom-right" 部分（如果我可以说，尽管 "bottom-right" 覆盖了大约 80% 的屏幕）。

现在，对于一个页面，我希望将内容包含在带有独立滚动条的两列布局中。在左侧，我想显示一个任务列表，在右侧，我想为我的员工显示已分配任务的框（两个框宽）。我希望能够独立于我的员工列表在我的任务列表中导航。

这是我要完成的一个非常基本的模型（我知道，它很丑）：https://drive.google.com/file/d/0BwbWwcCjL9EJT1B5MlFMQVh0UnM/view?usp=sharing

如果涉及bootstrap，甚至可以做到这一点吗？现在，我的任务列表和员工列表扩展了很多页（至少 4-5 页）。我希望它们包含在浏览器中 window 并且每个列表都有一个独立的滚动条，这样我就可以将任务从列表的顶部拖到底部的员工（作为示例），这现在是不可能的。

谢谢

Answer 1

终于，我找到了解决办法。我曾尝试使用 "scroll" class，但我忘记使用 "max-height"。现在，我使用以下代码：

$(document).ready(function() {
    ResizeListsSoTheyFitInScreen();
});
$(window).resize(function () { ResizeListsSoTheyFitInScreen(); });

function ResizeListsSoTheyFitInScreen() {
    var windowHeight = $(window).height();
    var taskListTop = $('#TaskList').offset().top;
    $('#TaskList').css('max-height', (windowHeight - taskListTop) + 'px');
    var employeeListTop = $('#EmployeeList').offset().top;
    $('#EmployeeList').css('max-height', (windowHeight - employeeListTop) + 'px');
}

它工作正常，但我不能 100% 确定它是最佳解决方案，因为我必须自己考虑底边距等问题。如果您有更好的解决方案，我愿意接受。

非常感谢

如何让引导内容包含在浏览器高度的两列中

How to get boostrap content to be enclosed in two column with the browser's height

css

twitter-bootstrap-3

scrollbar