html - 绝对定位的 div 包含一个 overflow hidden 的子 div，其中包含 2 个 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/我给了你的容器一个 position: 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 及其内边距；