CSS-自动填充高度 [英] CSS - Auto fill height

问题描述

这是我目前拥有的js小提琴，我正在尝试让类panel-body延伸到页面的整个窗口高度.它正在使用引导程序.

Here's a js fiddle of what I currently have, I am trying to get the class panel-body to stretch to the entire window height of the page. It's using 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:

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

推荐答案

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

You need to set html, body and all panel container to 100% height with inline-block style. More info jsfiddle.net/Y55af/5/.

这篇关于CSS-自动填充高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！