Question

请查看 Demo

了解我面临的问题。

<div class="row">
<div class="outer cols-md-12">
   <div class="inner1">Inner1</div>
   <div class="inner2">Inner2</div>
</div>
</div>

我在父div中有两个div。父div具有高度，因此是第一个内部div。我从第二个内部div给出了100％的高度，但它超出了父边界。

我已经隐藏了溢出来修复问题，但这是正确的方式还是我需要做的其他事情？我使用bootstrap 3

Answer 1

100％高度假定父母的全高。在这种情况下，inner2将采用400px的高度。这就是它溢出外部div的原因。

这可以通过将每个50％的高度分配给inner1和inner2来解决。

.outer {
    height:400px;
    width:400px;
    border:solid 1px red;
}    

.inner1 {
    height:50%;
    width:100%;
    border:solid 1px green;
}

.inner2 {      
    height:50%;
    width:100%;
    border:solid 1px yellow;
    background:beige;
}

检查这个小提琴：http://jsfiddle.net/GM9VQ/

内部Div 100％高度超过父div边界

1 个答案: