Question

我使用以下结构来获得与较小兄弟相同的高度。

<div class="col-md-12" style="display: table; height:100%;">

<!-- child 1 - this should take the height of the smaller sibling -->
    <div class="col-md-4" style="height: inherit;
            overflow: scroll;
            border: 1px solid #ccc;
            padding: 10px;"></div>

    <div class="col-md-8"></div> 

</div>

当浏览器（Chrome）缩小时，此功能正常。但是当我重置缩放时，滚动框缩小了。

为什么会出现这种情况以及如何以正常的浏览器大小进行初始显示？

我无法在jsFiddle中重现该问题，但无论如何代码如下：

https://jsfiddle.net/sachid/tvck2x6j/

Answer 1

请像这样使用身高：

<div class="col-md-12" style="display:table;height:auto;"><!--either use fix height (height :500px;)-->

<!-- child 1 - this should take the height of the smaller sibling -->
    <div class="col-md-4" style="height: inherit;
            overflow: scroll;
            border: 1px solid #ccc;
            padding: 10px;"></div>

    <div class="col-md-8"></div> 

</div>

Div仅在放大或缩小时正确显示

1 个答案: