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

【问题标题】：Absolutely positioned element going off screen when filled填充时绝对定位的元素离开屏幕
【发布时间】：2018-08-06 01:09:17
【问题描述】：

我有一个 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 的情况下，如何保持这种影响但防止它从页面上消失？

【问题讨论】：

标签： html css css-position

【解决方案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>

【讨论】：

对我来说，诀窍是明确地为 bottom 赋值 - 谢谢

【解决方案2】：

您是否尝试过为 .floatingPage 元素指定底部而不是顶部的绝对定位？

例如：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您需要元素浮动在其他两个的顶部，请尝试添加 z-index 并使用溢出。

这是一个 jsfiddle：http://jsfiddle.net/k8w79/

【讨论】：