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，我怎样才能保持这种影响，但防止它在页面上运行？

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>

Answer 2

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

例如：

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

Answer 3

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

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

Answer 4

您是否尝试过使用overflow属性并设置DIV的高度？

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

4 个答案: