css - 嵌套面板高度

Question

我的情况类似于:http://jsfiddle.net/gP5Dg/

<div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title</h3>

        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 0, 0</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 0</div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 1</div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

(您可能需要展开 html 子窗 Eloquent 能明白我的意思)

我希望面板 0、0 占据包含面板的整个高度。我怎样才能做到这一点？我是 css 新手，曾尝试将各个部分的最小高度设置为 100%，但这没有用。

这些内部面板的内容可能会有所不同。如果我可以控制列中每个面板可以占用的总数的百分比，那将会很有用。我想如果没有某种 javascript，我无法做到这一点？

Answer 1

可以使用Javascript重新定义面板的高度大小，需要定义元素的id:

<div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title</h3>

        </div>
        <div class="row" id="panel_parent">
            <div class="col-md-6">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body" id="panel00">Panel 0, 0</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 0</div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 1</div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">Panel 1, 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后当文档准备好时，您将 panel00 的高度分配给面板父级的值:

$(document).ready(function(){
    $('#panel00').height($('#panel_parent').height());
});

您还可以使用大小的百分比，将其乘以一个值，在本例中，您必须将 50% 乘以 0.5

$('#panel00').ready(function(){
    $('#panel00').height($('#panel_parent').height()*0.5);
});