Css 嵌套面板高度

我的情况类似于：

小组标题
面板0，0
小组1，0
小组1，1
小组1、2

（您可能需要展开html子窗口来了解我的意思）

我希望面板0，0占据包含面板的整个高度。我该怎么做？我是css新手，曾尝试将各个部分的最小高度设置为100%，但这不起作用

---

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

您可以使用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>

您还可以使用大小的百分比，将其乘以一个值，在这种情况下，50%必须乘以0.5

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

---

没有任何javascript

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

见：

CSS:

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

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

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

HTML:

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

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

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

小组标题
面板0，0
小组1，0
小组1，1
小组1、2