CSS - 自动填充高度答案

【问题标题】：CSS - Auto fill height [duplicate]CSS - 自动填充高度
【发布时间】：2013-12-01 02:13:47
【问题描述】：

这是我目前拥有的一个 js fiddle，我试图让类 panel-body 伸展到页面的整个窗口高度。它正在使用引导程序。

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

【问题讨论】：

您希望每个.panel-body 成为整个文档的高度？还是屏幕的高度？
@jameslafferty 窗口高度，将更新问题以澄清

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

我想这就是你所追求的？ 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%;
}

【讨论】：

我认为 OP 正在寻求使 .panel-body 成为窗口的高度（不知道为什么，但假设他们有他们的理由）。

【解决方案3】：

您需要使用 inline-block 样式将 html、body 和所有面板容器设置为 100% 高度。更多信息jsfiddle.net/Y55af/5/.

【讨论】：

那个链接对我来说是 500。
再试一次，这是fiddle内部问题
链接是很好的完美解决方案。