2

我在使用 div 元素设计布局 css 时遇到问题。

基本上我的主页布局设计如下图所示：

在此处输入图像描述

红框是浏览器屏幕区域。黑框是数据将包含/或通过 ajax 加载的内容区域。绿色框是响应结果的数据列表，里面大约有一百行。数据列表包含标题 div 和行 div。

我打算做的是在蓝色区域设置溢出，这是数据行，所以滚动条将出现在蓝色框的右侧，而不是红色或黑色框的右侧。然后当浏览器区域（红色）调整大小时，里面的所有 div 也会调整到最佳大小。

当内部数据通过 set css overflow: auto /scroll for blue box div 溢出时，我设法使滚动条出现在蓝色框上。但问题是溢出：自动属性似乎只在我为蓝色框 div 设置一定高度时才起作用，比如说 400px。当我调整浏览器的大小时，蓝色框 div 保持在 400px 的高度。

如何让它自动调整大小？提前感谢您的帮助。

4

2 回答 2

2

您需要修复 HEADER、“Table Heading Row”、FOOTER 和“subfooter”行的高度

从那里你可以计算中间框的顶部和底部位置偏移量，它应该是绝对定位的，因为它定位你还需要绝对定位两个底部页脚，在我的示例中，我将它们包裹了两行并定位它们作为一个，这可能看起来多余，但实际上您的许多容器不再需要（尽管我没有将它们清除）

你的浮动代码也太多了，你不需要将每个浮动相对定位到左边：0.0% 所以我把所有的东西都砍掉了，如果你想在里面做绝对定位，你只需要顶部相对定位的东西..除了body 元素，这是我们需要用于这种样式布局的所有元素（注意我确实稍微更改了 HTML 的结尾）

回复：这里

顺便说一句，我认为这些内部行作为实际行会更好，<table>对我来说似乎是数据行；）-整个事情可能意味着更少的代码..

于 2011-04-21T16:47:42.347 回答
0

您正在寻找的是蓝色框的定位 div。

.blueboxdiv{
   position: relative;
   top     : 100px; // height of header - Top stays 100px away from header thus grows on resize!
   bottom  : 0px;   // Bottom sticks to bottom
   left    : 0px;   // Left sticks to left
   right   : 0px;   // Right sticks to right
}
于 2011-04-21T15:16:30.133 回答