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;
}

margin + height使得孩子即使使用box-sizing：border-box也会溢出

1 个答案: