嵌套面板高度

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子窗口以查看我的意思）

我希望面板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());
});

您还可以使用大小的百分比，将其乘以一个值，在这种情况下，您需要乘以0.5％

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

Answer 2

没有任何javascript。

首先，您必须设置父高度。然后你可以设置面板高度。 对于面板高度，您应设置100％减去边距和填充（10px）

请参阅：http://jsfiddle.net/Kmhtt/

<强> CSS：

.parentHeight
{
    height: 500px; !important;
}

.fullHeight
{
    height: calc(100% - 10px); !important;
}

<强> HTML：

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

        </div>
        <div class="row fullHeight">
            <div class="col-md-6 fullHeight">
                <div class="panel-body fullHeight">
                    <div class="panel panel-default fullHeight">
                        <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>