如何使用网格框架实现部分灵活的屏幕布局？
我正在尝试使用 CSS 网格框架（BluePrint）实现以下屏幕布局，但没有成功：
如何可以通过网格框架实现这一点吗？有人可以分享 CSS/HTML 代码示例吗？谢谢。
PS：我想使用框架的原因是确保此布局适用于所有浏览器（任何安全框架都可以，不一定是BluePrint）。
I am trying to implement the following screen layout using a CSS grid framework (BluePrint), but unsuccessfully:
How can achieve this with a grid framework? Does anyone have a CSS/HTML code example to share? Thanks.
P.S.: The reason I want to use a framework is to make sure this layout works in all browsers (any safe framework is ok, it does not have to be BluePrint).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
YAML 应该能够： http://www.yaml.de/fileadmin/ example/04_layouts_styling/3col_faux_columns.html
或者 Fluid 960？
http://designinfluences.com/fluid960gs/
YAML should be able to that: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html
or maybe Fluid 960?
http://designinfluences.com/fluid960gs/
深入研究这个问题后，我发现用网格框架是不可能解决这个问题的。问题在于几个高度和宽度是彼此导数的。此外，根据“中心”单元的内容，也可能会出现滑动条。
我找到了一个涉及一些 Javascript 的长解决方案。我首先在 HTML 中使用 div 定义屏幕的不同单元格。然后，我检索文档宽度和高度，并使用 JQuery 设置单元格的宽度和高度。我从固定值开始，然后是简单导数，然后是复杂导数。
对于滑动条问题，我使用了此处解释的技巧。我根据滑动条的存在来调整中心列的大小，滑动条本身取决于“中心”单元的高度，而“中心”单元本身取决于屏幕的宽度。
After digging deep into this issue, I got to understand that it is impossible to solve it with a grid framework. The problem is that a couple of heights and widths are derivative of each other. Moreover, depending on the content of the 'central' cell, slide bars may appear too.
I found a long solution involving some Javascript. I first define the different cells of my screen with divs in my HTML. Then, I retrieve the document width and height and set cells' widths and heights using JQuery. I start with fix values, then simple derivatives, then complex derivatives.
For the slide bar issue, I used the trick explained here. I adjust the size of the central column according to the presence of a slide bar, which itself is depending on the height of the 'central' cell, which itself depends on the width of the screen.