html - 如何使用网格框架实现部分灵活的屏幕布局？

Question

我正在尝试使用 CSS 网格框架（BluePrint）实现以下屏幕布局，但未成功：

如何使用网格框架实现这一点？有没有人可以分享 CSS/HTML 代码示例？谢谢。

PS：我想使用框架的原因是为了确保这个布局在所有浏览器中都能工作（任何安全的框架都可以，它不一定是 BluePrint）。

Answer 1

YAML 应该能够做到这一点：http ://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html

或者流体 960？ http://designinfluences.com/fluid960gs/

Answer 2

在深入研究了这个问题之后，我明白了用网格框架是不可能解决的。问题是几个高度和宽度是相互衍生的。此外，根据“中央”单元格的内容，也可能出现滑动条。

我找到了一个涉及一些 Javascript 的长解决方案。我首先在 HTML 中使用 div 定义屏幕的不同单元格。然后，我检索文档的宽度和高度，并使用 JQuery 设置单元格的宽度和高度。我从固定值开始，然后是简单的导数，然后是复杂的导数。

对于滑动条问题，我使用了此处解释的技巧。我根据滑动条的存在来调整中央列的大小，它本身取决于“中央”单元格的高度，它本身取决于屏幕的宽度。