html - margin + height 使 child 即使使用 box-sizing :border-box 也会溢出

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_wrapper 的高度，即使 box-sizing:border-box已应用，它仍然溢出。

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

Answer 1

将标题从 height 100% 更改为 height: auto:

#header {
    height: auto;
}