如何使用 Javascript / jQuery 根据浏览器的窗口大小动态设置 CSS 类中的高度？

Question

我正在尝试使用 Bootstrap 3 网格创建 2 个独立的可滚动列（左和右），它们应该根据浏览器的窗口大小动态改变它们的高度，并由导航栏的 100 像素的顶部填充偏移。目前我必须设置一个固定的高度（600px），这在不同的屏幕尺寸上显然不能很好地缩放。

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)

非常感谢您的建议。

Answer 1

我认为这就是你想要完成的：

DEMO

这使用 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>

Answer 2

在你的 CSS 文件中使用它：

 @media only screen and (min-device-width: 1600px) and (max-device-width: 1700px) {

 ////your css codes

 }

或

 @media only screen and (min-width: 1600px) and (max-width: 1700px) {

 ////your css codes

 }

Answer 3

如果您的唯一目标是缩小尺寸，请使用 EM 而不是像素，然后为较小的屏幕更改字体大小。

@media all and (min-width: 901px){ html{ font-size:100.00%;} }
@media all and (max-width: 875px) and (min-width: 851px){ html{ font-size: 98%;} }
@media all and (max-width: 850px) and (min-width: 826px){ html{ font-size: 96%;} }
etc....

.left {
    height: 37.5em;
    overflow: auto;
}

.right {
    height: 37.5em;
    overflow: auto;
}

Answer 4

如果您真的非常想将元素的高度固定到浏览器窗口，您可以只使用固定定位。

.left, .right {
    position: fixed;
    top: 100px;
    bottom: 0;
    overflow: auto;
}

.left {
   left: 0;
   width: 200px;
}

.right {
   left: 200px;
   right: 0;
}

Here's a JSFiddle that demonstrates what that does.当然，这在移动设备上看起来一点也不好看。