保证金+高度使孩子即使箱尺寸为溢出：边界框

Question

HTML

<div class="container-fluid"> 
    <div id="main" class="row"> 
     <div id="header_wrapper" class="col-xs-10 col-xs-offset-2"> 
       <div id="header" class="mcard">header</div> 
     </div> 
    </div> 
</div> 

CSS

body, 
html { 
    width: 100%; 
    height: 100%; 
    background: #eeeded; 
} 

.container-fluid { 
    min-height: 100%; 
    height: 1px; 
} 

.row { 
    margin: 0px; 
} 

.row [class*="col-"] { 
    padding: 0; 
} 

#main { 
    margin: 4rem; 
    min-height: 100%; 
    height: 1px; 
} 

#header_wrapper { 
    height: 20%; 
} 

#header { 
    height: 100%; 
} 

.mcard { 
    background: #fff; 
    display: block; 
    margin: 1rem; 
    transition: all 0.2s ease-in-out; 
} 

http://codepen.io/anon/pen/jWGapz?editors=110

在上面的代码，#header似乎要溢出出#header_wrapper，因为#header{height:100%;}和.mcard{margin:1rem;}这加起来高于#header_wrappera的高度即使box-sizing:border-box已被应用，它仍然溢出。

如何在不删除任何边距或使用px中的硬编码高度的情况下避免溢出？

Answer 1

您的标题更改从height 100%到height: auto：

#header { 
    height: auto; 
}