html - 绝对定位的 div 包含一个隐藏溢出的子 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/ 我给了你的容器 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及其填充；