我正在尝试使用Bootstrap 3网格创建2个可独立滚动的列（左右两列），该网格应根据浏览器的窗口大小动态更改其高度，并由导航栏的顶部填充100px补偿。目前，我必须设置一个固定的高度（600像素），这显然在不同的屏幕尺寸下无法很好地缩放。
CSS：
.left {
height: 600px;
overflow: auto;
}
.right {
height: 600px;
overflow: auto;
}
HTML：
<div class="row">
<div class="col-md-9 left scrollable">
// Content Left Column
</div>
<div class="col-md-3 right scrollable">
// Content Right Column
</div>
</div>
我已经尝试过将它们放在#testdiv中，并使用Javscript / jQuery解决方案更改其高度，这似乎不起作用：
$('#testdiv').height($(window).height() - 100)
非常感谢您的指教。
我认为这是您要实现的目标：
这使用css calc将两个左/右列的高度设置为窗口的100％减去导航栏的高度（我使用html5，<aside>但是如果您愿意，也不能将div标签与类一起使用）。
别忘了，元素的高度取决于设置其高度的父元素。因此，在这种情况下，我使用100vh将html和主体高度设置为窗口高度的100％。这会将整个页面的高度限制为窗口的高度。如果您希望主要内容不具有独立的滚动行为（从溢出：自动），则将html / body高度设置为100％。
这是演示css / html的核心要素：
CSS：
body, html {
height: 100vh;
margin: 0;
padding: 0;
}
nav {
background-color: palegreen;
height: 100px;
}
main, aside {
overflow: auto;
height: calc(100% - 100px);
float: left;
}
main {
width: 50%;
background-color: pink;
}
aside {
width: 25%;
background: #ccc;
}
HTML：
<nav>
Navigation
</nav>
<aside>
Left Aside
</aside>
<main>
Main Content
</main>
<aside>
Right Aside
</aside>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句