等高面板？答案

【问题标题】：Equal height panels?等高面板？
【发布时间】：2023-11-24 09:35:01
【问题描述】：

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

像这样：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 抱歉我之前没有包含它！

【问题讨论】：

请包含您的 CSS，以便我们更好地帮助您。
现在添加，抱歉！

标签： css twitter-bootstrap-3 height multiple-columns rows

【解决方案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>

【讨论】：

再问一个问题，如果您不介意的话！主面板的宽度从右侧略微高出，而其他两个面板是相同的，这是怎么发生的？ i.imgur.com/qhRdXn3.png
我的版本也是这样。所以可能有两个原因。左侧面板嵌套在另一个 div 中，而右侧不是，或者您有一些影响它的 css。我建议使用开发人员工具 (F12) 来查看差异所在。无论如何，习惯这些工具是个好主意
.mainPanel {margin-right: 15px;} 我猜对我来说已经足够好了，谢谢你的帮助！ :)

【解决方案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/

【讨论】：