Question

我遇到的问题似乎很常见但有点麻烦。

我在我的网络应用程序中使用bootstrap。主布局/母版页面有一个顶栏（用于操作）和一个左侧导航栏（当然，用于在应用程序页面之间导航）。因此，页面内容始终位于＆＃34;右下角＆＃34;屏幕的一部分（如果我可以说，虽然那个＆＃34;右下角＆＃34;覆盖了大约80％的屏幕）。

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

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

参与bootstrap时甚至可以实现这一点吗？现在，我的任务列表和我的员工列表扩展了许多页面长度（至少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');
}

它工作正常，但我不是100％肯定这是最好的解决方案，因为我必须考虑到底部余量等我自己。如果你有更好的解决方案，我愿意接受它。

非常感谢

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

1 个答案: