如何以浏览器的高度将引导内容封装在两列中

Question

我有一个问题，似乎很常见，但稍微有点扭曲。

我正在为我的web应用程序使用引导程序。主布局/母版页有一个顶部栏(用于操作)和一个左侧导航条(当然，用于应用程序页面之间的导航)。因此，页面的内容总是在屏幕的“右下角”部分(如果我可以说的话，尽管“右下角”覆盖了大约80%的屏幕)。

现在，只有一页，我希望内容被封闭在一个独立滚动条的两列布局。在左边，我想显示一个任务列表，在右边，我想显示我的员工已经分配的任务的框(两个框宽)。我希望能够独立于我的员工列表在任务列表中导航。

下面是我正在努力实现的一个非常基本的模拟(我知道，它很难看)：https://drive.google.com/file/d/0BwbWwcCjL9EJT1B5MlFMQVh0UnM/view?usp=sharing

当涉及引导时，甚至有可能做到这一点吗？现在，我的任务列表和我的员工列表在多个页面长度上扩展(至少4-5页)。我希望它们包含在浏览器窗口中，并为每个列表设置一个独立的滚动条，这样我就可以将任务从列表的顶部拖到底层的员工(举个例子)，这现在是不可能的。

谢谢

Answer 1

最后，我找到了一个解决办法。我试过使用“卷轴”类，但我忘记使用“最大高度”。现在，我使用以下代码：

$(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');
}

虽然我不能百分之百肯定这是最好的解决方案，但它工作得很好，因为我必须考虑到我自己的底差等等。如果你有更好的解决方案，我会接受的。

非常感谢