HTML布局设计-需要更好的方法

Question

我需要为我的项目设计一个布局。有一些div的排列，包括上下两个Div、固定高度、滚动等内容。很难用语言来描述问题，因此我在下面附上了一张图片，请参考截图。

我想要实现的是根据浏览器窗口的整体高度来排列面板。粉色模块是父级Div的绝对定位底部。上方Div是粉色Div的前一个同胞，并且包含面板。当浏览器大小调整时，上部Div不应该出现滚动条。相反，面板应该显示滚动（如第二张图）。 可以使用HTML和CSS完成，而我并不想使用JavaScript或jQuery。非常感谢您的任何建议。谢谢。

抱歉，我无法正确制作HTML。目前我的html在上述div中显示了滚动条（实际上应该在面板中显示滚动条）。我在这里创建了一个fiddle。请查看。 这里

- Ashwin

---

HTML的解释已经在图片中了。如果您提供了它，将节省大家的时间并更快地得到答案。另外，我喜欢固定高度的HTML如何改变高度。 - mowwwalker

@Ash，请澄清一下那个固定高度的事情。 - ANeves

粉色Div的高度是固定的，因为它包含了一些按钮，如下一页、上一页和其他一些按钮。高度大约为270像素 :) - Ashwin

Answer 1

我对CSS做了一些修改，希望这是你所寻找的。

http://jsfiddle.net/vCVUL/embedded/result/

祝好。

- Sitnam

---

我认为这很接近了，但是如果您看到图像，面板的“最大高度”为“自动”或符合其内容。因此，只有在面板的组合高度大于upperdiv区域时才需要进行调整。他还提到了一个未定义数量的面板。（我本来想做你在答案中所说的加上这个，但既然你已经很接近了） - sg3s

我们可以精确地更改33％为（25、50、20等），方法是将100％除以面板数量。无论如何，这个问题仍然存在。如果CSS中的max-height:auto起作用，这个问题就会得到解决，不是吗？ - Ashwin

我认为唯一的其他方法是在.resize方法内部，您可能可以进行一些智能数学计算来确定子节点及其高度。令人沮丧的是，这个问题的答案不仅仅是一些CSS和HTML。但是肯定会有人做对的。我仍然会去看看它。谢谢。 - Sitnam

Answer 2

你可以使用ExtJS来实现这个功能。请查看演示页面。在那里，你会找到“布局管理器”，它们将为你完成这项工作。

- PiTheNumber

---

ExtJS是一个典型的重量级js库，我不会在单个应用程序中使用它，并且会使用更轻的库，如jquery编写一些自定义JS，特别是在CSS不足以满足需求的情况下。 - sg3s

你说得完全正确，ExtJs并不适用于单页应用程序。我认为这个项目很大，因为它正在进行很多计划。 - PiTheNumber

Answer 3

我想不出比在页面加载后设置动态部分的高度更好的方法了。
而对于调整大小，我们可以使用JQuery绑定相同的函数。

http://jsfiddle.net/N3HWz/7/

- ANeves

---

谢谢，但是处理溢出面板的问题仍然存在。正如您所知，我不想为upperDiv显示滚动条。 - Ashwin

啊，我错过了你说要调整窗口大小的那部分……回答已经更新。 - ANeves