html - 固定高さ 1 つとスクロール 1 つの 2 つの div を含む、オーバーフローが非表示の子 div を含む絶対配置 div

Question

Web アプリは次のような構造になっていますが、スクロールするとページからはみ出してしまいます。何がうまくいかないのですか？

http://jsfiddle.net/kYEES/

HTML

<div class="wrapper">
<div class="container">
  <div class="fixed-height">
    <p>Fixed height div</p>
  </div>

  <div class="scrolling-height">
    <p>Scrolling div</p>
  </div>
</div>
</div>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper { 
  position: absolute;
  height: 100%;
  width: 100%;
}

.container {
  background: lightgray;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  position: relative; 
}

.fixed-height {
  background-color: yellow;
  height: 40px;
  padding: 5px 10px;
}

.scrolling-height {
  background-color: green;
  bottom: 0;
  height: 100%;
  overflow-y: scroll;
  margin-bottom: 20px;
  padding: 5px 10px;
  position: absolute;
  top: 40px;
}

Answer 1

このようなもの: http://jsfiddle.net/DhWm5/3/ 私はあなたのコンテナに aposition: relativeとあなたのスクロール可能なdiv絶対位置を与えました:

.container {
    background: lightgray;
    height: 100%;
    padding: 10px;
    position:relative;
}
.scrolling-height {
    background-color: green;
    margin-bottom: 50px;
    overflow-y: scroll;
    padding: 5px 10px;
    position:absolute;
    top: 50px; bottom: 0;
}

top: 50px固定の高さとそのパディングを許可することですdiv。