关于html：CSS – 自动填充高度


CSS - Auto fill height

本问题已经有最佳答案，请猛点这里访问。

这是我目前拥有的JS工具，我正在尝试让类面板主体伸展到页面的整个窗口高度。它正在使用引导程序。

http://jsfiddle.net/y55af/

示例CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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示例：

1
2
3
4
                    Item
               
               
                    Item Body....

号

相关讨论

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

相关讨论

我想这就是你想要的？body和html需要设置为100%，我假设您希望面板为50%，这样您可以有两行，否则它们将溢出。http://jsfiddle.net/y55af/4/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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%;
}

号

相关讨论

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

1
2
3
4
5
6
(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));