绝对定位的元素在填充时离开屏幕

Question

我有一个 DIV 容器，.floatingPage它绝对位于另外两个 DIV 容器.top和.bottom. 我的问题是.floatingPage元素的内容是动态的，有时包含大量数据，这些数据延伸.floatingPage到屏幕的可见部分下方。

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top:50px; 
}

<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>

现在，因为我知道我的应用程序的用户使用 JS（公司控制面板），我一直在计算.floatingPage元素的高度并扩展 的高度.bottom以适应新内容。到目前为止，这一直没问题，并开始引起问题。另外，我不想为其他用户没有 JS 的项目做这个 hack。

我需要这个floatingPage元素漂浮在其他两个元素的顶部——这就是网站设计的重点。在没有 JS 的情况下，如何保持这种影响但防止它离开页面？

Answer 1

尝试这个：

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top      : 50px; 
  bottom   : 50px;
  overflow : auto;
}

<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>