等高面板？

Question

我正在尝试在右侧制作一个面板，使其高度与左侧两个面板的高度相同。

像这样：http://i.imgur.com/S0uMCut.png

我试过使用 .row-eq-height css，但它不会自己拉伸面板。

<!--  Row #2 -->
    <div class="row">
        <div class="container row-eq-height">
            <div class="col-md-4">
                <!--  Information panel -->
                <div class="panel panel-default -->">

                    <div class="panel-heading">
                        <p class="panel-title">Information</p>
                    </div>

                    <div class="panel-body">
                        <h4 id="numVal">Value: 0</h4>
                    </div>

                </div>

                <!--  Secondary box -->
                <div class="panel panel-default secondPanel">
                    <div class="panel-heading">
                        <p class="panel-title">Box2</p>
                    </div>

                    <div class="panel-body">
                    </div>
                </div>
            </div>

            <!--  Main panel -->
            <div class="col-md-8">
                <div class="panel panel-default mainPanel">
                    <div class="panel-body">

                    </div>
                </div>
            </div>

        </div>
    </div>

我对这一切还很陌生，所以请多多包涵！我会很感激一些帮助！谢谢！

编辑：CSS：https://pastebin.com/7RXYYH3w抱歉我之前没有包含它！

Answer 1

我稍微调整了一下，将 display: flex 添加到外部容器。这似乎可以满足您的需求。

<div class="row">
    <div class="row container-fluid" style="display:flex">
        <div class="col-md-4">
            <!--  Information panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <p class="panel-title">Information</p>
                </div>
                <div class="panel-body">
                    <h4 id="numVal">Value: 0</h4>
                </div>
            </div>
            <!--  Secondary box -->
            <div class="panel panel-default secondPanel">
                <div class="panel-heading">
                    <p class="panel-title">Box2</p>
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>
        <!--  Main panel -->
        <div class="panel panel-default mainPanel col-md-8">
            <div class="panel-body">

            </div>
        </div>
    </div>
</div>

Answer 2

您可以使用 Flexbox 属性匹配高度。这是我认为您正在尝试做的事情：http://jsfiddle.net/DTcHh/33186/

.row-eq-height{
  display: flex;
}
.take-up-space{
  flex:1;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

此外，这里有一个开始使用 Flexbox 的好方法：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

等高面板？

Equal height panels?

css

height

rows

multiple-columns

twitter-bootstrap-3