css液体布局里面有div溢出

Question

我在使用div元素设计布局css时遇到了麻烦。

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

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

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

当内部数据溢出时，我设法让滚动条出现在蓝色框中，设置为css overflow：auto / scroll for blue box div。但问题是溢出：自动属性似乎只有在我为蓝盒div设置一定高度时才会有效，让我们说大约400px。当我调整浏览器大小时，蓝框div保持400px高度。

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

Answer 1

你需要修正HEADER，“桌面标题行”，FOOTER和“子脚”行的高度

从那里你可以计算中间盒子的顶部和底部位置偏移，这应该是绝对定位的，因为它的定位你还需要绝对定位两个底部的页脚，在我的例子中我已经包裹了两行并将它们定位为一个，这看起来似乎有些过剩，但实际上有很多不再需要的容器（尽管我没有把它们除掉）

你的浮动代码也太过分了，你不需要将每个浮点数相对定位到左边：0.0％所以我把所有浮标都砍掉了，如果你想在它里面进行绝对定位，你只需要顶部相对位置。除了我们需要用于此样式布局的body元素（注意我确实稍微更改了HTML的结尾）

refiddle：HERE

和btw，我认为这一个内部行会更好，因为它实际上是<table>，它似乎对我来说是数据行;） - 整个事情可能意味着更少的代码.. < / p>

Answer 2

你要找的是蓝盒子的定位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
}