包含静态头的CSS HTML溢出问题

Question

我正在努力寻找溢出内容的底部，这可以在小提琴中看到。在保持这种布局的同时，你会如何解决这个问题呢？

http://jsfiddle.net/Sa6cb/392/

CSS：

.wrapper {
  overflow-y: hidden;
  overflow-x: hidden;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
}

.wrappedheader {
  position: static;
  border-bottom: 1px solid #000;
  padding: 15px;
}

.wrappedbody {
  position: relative;
  overflow-y: auto;  
  height: 100%;
  padding: 15px;
}

HTML：

<div class="wrapper">
  <div class="wrappedheader">
    This is a header
  </div>

  <div class="wrappedbody">
    <!-- Content causing overflow-y -->
  </div>

</div>

Answer 1

你的被子有100％的高度，这是它的父包装的100％。但是，包装器有两个子节点，wrappedbody 和 wrappedheader。包裹体的高度应该是包装纸的高度减去包裹纸的高度：

.wrappedbody {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/
    padding: 15px;
}

http://jsfiddle.net/feihcsim/14auqpqd/