5

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

4

4 回答 4

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>

于 2012-10-12T00:22:34.403 回答
0

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

例如：

.floatingPage { position:absolute; bottom:10px; }
于 2012-10-12T00:20:44.340 回答
0

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

于 2012-10-12T00:22:34.990 回答
0

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

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

于 2012-10-12T00:24:21.343 回答