内部带有div溢流的css液体布局

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

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

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

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

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

---

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

您需要的是蓝色方框的定位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
}

---

您需要固定页眉、“表格标题行”、页脚和“子文件夹”行的高度

从那里，你可以计算中间框的顶部和底部位置偏移，应该绝对定位，因为它定位了，你还需要绝对定位两个底部的页脚，在我的示例中，我将它们包装成两行，并将它们定位为一行，这似乎有些过分，但实际上有很多容器不再需要了（尽管我没有将它们剔除）

另外，你的浮点代码太多了，你不需要把每个浮点都相对地放在左边：0.0%，所以我把所有的tham都切掉了，如果你想在里面做绝对定位，你只需要相对地放在上面。。除了body元素，这是我们在这个样式布局中需要用到的所有元素（注意，我确实稍微更改了HTML的结尾）

重新填充：

---

顺便说一句，我认为这一行内部行作为实际的

会更好，对我来说，它似乎是数据行；）-整个过程可能意味着代码要少得多。

您是否尝试过设置基于百分比的高度？您是否有理由不让浏览器为您进行滚动而不是使用DIVs滚动条？如果有一些代码可以查看，这将更容易回答。请考虑制作一个测试用例来显示你目前为止拥有的东西。“罗伯特，你能帮我看看怎么做吗？”戴夫，原因是避免长时间向下滚动浏览器，这样我就不会把注意力集中在标题部分上的菜单上，也不会丢失页脚部分上的几个链接。谢谢克莱尔……，正是我想要的。在FF和Chrome上完美地工作。在IE上，行数据不会显示。我使用IE7。当我将行数据从div元素切换到表时，它出现了。但是溢出滚动条不起作用。我的IE版本有问题吗？我现在正在下载版本8，并将再次测试它。无论如何，非常感谢您重新填充我的代码。：）没问题。。它在我的IE7中运行正常（我仍然使用它进行测试，如果它正常工作的话；）-如果你决定切换到一个表，你仍然需要用一个div来处理滚动-不管怎样，如果你仍然有问题，请将你的代码放在小提琴里，我会重新检查..我已经升级到IE8，仍然不工作…：（不知道哪里出了问题。除了表格列表标题和行之外，我没有做任何更改。以前使用过…，现在我切换到…（桌面版应用程序）类似的情况是电子表格应用程序布局，即ms.office excel。滚动只影响行。主菜单（标题）、页脚和列标题（A-Z）在行上/下/左/右滚动时仍保留。