CSS - 自动填充高度

19 浏览
0 Comments

CSS - 自动填充高度

这个问题已经有了答案:

如何使一个div的高度占据整个浏览器窗口的高度

这里有一个js fiddle链接,展示了我目前所拥有的内容,我试图让class为panel-body的元素,占据整个页面的高度,它是使用bootstrap制作的。

http://jsfiddle.net/Y55af/

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样例:

                    Item
                    Item Body....

admin 更改状态以发布 2023年5月22日
0
0 Comments

如果 JavaScript 是一个选项,你可以这样做:\n

(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));

0
0 Comments

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

0