Question

我正在使用Bootstrap 3在页面上显示一些面板，但我希望面板主体在页面上的高度为100％，但我的CSS知识显然不是最新的。

如果我指定一个高度（如100px），那么它会变高，但它没有响应。

有人知道我该怎么做吗？

我在这里设置了一个JSFiddle：http://jsfiddle.net/skeniver/47CZ6/5/

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            Heading
        </div>
        <div class="panel-body">
        </div>
    </div>
</div>

Answer 1

试试这个。这不会覆盖您的Bootstrap基本CSS。

http://jsfiddle.net/YzHu4/

HTML

<div class="container m100">
    <div class="panel panel-default m100">
        <div class="panel-heading">
            Heading
        </div>
        <div class="panel-body m100">            
        </div>
    </div>
</div>

CSS

html,body{height:100%;}
.m100 {
    height:100%;
    min-height:100%;
}

Answer 2

在CSS中将高度设置为100％而不是100px

.panel-body {height：100％;}

Answer 3

任何面板容器也需要100％高度 - body，html和.container：

html,body {
    height:100%;
}

.container,.panel {
    height:100%;
}

演示：http://bootply.com/111090

Bootstrap 3响应高度

3 个答案: