Html CSS-自动填充高度

这是我目前拥有的js文件，我试图让类面板主体延伸到页面的整个窗口高度。它正在使用引导

示例css：

.mainContent{
    padding:20px;
}
.workplace_outter{
    width:100%;
    overflow-x:scroll;
}
.workplace_inner{
    white-space: nowrap;
}
.workplace_outter .panel{
    width:300px;
    margin-right:5px;
    display:inline-block;
}

示例HTML：

<div class="mainContent">
    <div class="workplace_outter">
        <div class="workplace_inner">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Item
                </div>
                <div class="panel-body">
                    Item Body....
                </div>
            </div>
        </div>
    </div>
</div>

项目
项目正文。。。。

如果JavaScript是一个选项，您可以执行以下操作：

(function (D, undefined) {
    'use strict';
    var element, panelBodies;
    panelBodies = Array.prototype.slice.call(D.getElementsByClassName('panel-body'), 0);
    for(;0 < panelBodies.length; element = panelBodies.pop(), element.style.height = D.body.clientHeight + 'px');
}(document));

（函数（D，未定义）{
"严格使用",；
变量元素，面板体；
panelbody=Array.prototype.slice.call（D.getElementsByClassName（'panel-body'），0）；
对于（；0

我想这就是你想要的？body和html需要设置为100%，我还假设您的意思是希望面板为50%，这样您可以有两行，否则它们将溢出

---

您需要使用内联块样式将html、正文和所有面板容器设置为100%高度。

---

更多信息。

是否希望每个

.面板主体

都是整个文档的高度？还是屏幕的高度？@jameslafferty窗口的高度，将更新问题以澄清我认为OP希望将

。面板主体
设置为窗口的高度（不确定原因，但假设他们有自己的原因）。该链接对我来说是500。再试一次，它的小提琴内部问题链接是一个很好的完美解决方案。
.mainContent{
    padding:20px;
}
.workplace_outter{
    width:100%;
    oveflow-x:scroll;
}
.workplace_inner{
    width:2000px;
}
.workplace_outter .panel{
    width:300px;
    margin-right:5px;
    display: inline-block;
}

.workplace_outter, .workplace_inner, .panel-body, .mainContent {
    height:100%;
}

.panel {
    height: 50%;
}

html, body {
    height: 100%;
}