当绝对定位的元素被填充时，它会超出屏幕。

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用户的项目进行这种黑客攻击。

我需要这个floatingPage元素浮动在其他两个元素的上方 - 这就是网站设计的全部意义。如何保持这种效果，但防止它超出页面范围，而不使用JS？

- ShadowStorm

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>

- AlienWebguy

---

对我来说的诀窍是显式地给bottom赋一个值 - 谢谢 - Jona

Answer 2

你尝试过使用绝对定位来指定.floatingPage元素的底部而不是顶部吗？

例如：

.floatingPage { position:absolute; bottom:10px; }

- blearn

Answer 3

你尝试过使用overflow属性并设置DIV的高度吗？

- Bitco Software

Answer 4

如果您需要该元素浮动在其他两个元素的上方，请尝试添加z-index并使用overflow。

这里有一个jsfiddle：http://jsfiddle.net/k8w79/。

- Scott Hillson