Question

我正在尝试使用Bootstrap 3网格创建2个可独立滚动的列（左侧和右侧），它应根据浏览器的窗口大小动态更改其高度，并通过导航栏的100px的顶部填充偏移。目前我必须设置一个固定的高度（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设置窗口高度的100％的html和身高。这会将整个页面的高度限制在窗口的高度。如果您希望主内容不具有独立滚动行为（来自overflow：auto），则将html / body高度设置为100％。

这是demo 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

 }

OR

 @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.当然，这在移动设备上看起来并不好看。

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

4 个答案:

DEMO