Question

这是我目前所拥有的js小提琴，我试图让类面板体延伸到页面的整个窗口高度。它正在使用bootstrap。

示例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>

Answer 1

您需要使用内联块样式将html，body和所有面板容器设置为100％高度。更多信息jsfiddle.net/Y55af/5/。

Answer 2

如果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));

Answer 3

我认为这就是你追求的目标？ body和html需要设置为100％另外我假设你的意思是你希望面板为50％所以你可以有两行，否则它们会溢出。 http://jsfiddle.net/Y55af/4/

.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%;
}

CSS - 自动填充高度

3 个答案: