我试图实现以下布局,如截图所示.
主要特点是
>屏幕分为3个区域(列);
>左/右列是固定宽度;
>中间列根据浏览器宽度扩展
>右列细分为两个区域
>底部区域是固定尺寸,始终位于底部
>顶部区域根据浏览器高度扩展
使用HTML表格花了我大约2个小时来生成上面的截图,具有上述功能.
在用CSS填充两天之后,我无法看到它如上所述,我对CSS和相关屏幕截图的尝试如下:
Meta name="viewport" content="width=device-width,initial-scale=1">
ottomrow">
BottOM
CSS截图:
CSS尝试的问题是:
>中间col不扩展(鲑鱼色部分);
>相反,白色的颜色突然出现;
>总是不能让粉红色的区域留在底部
>不能让黄色区域上下拉伸
>不需要的包装(即右边区域位于左下方,中间区域)
因此,我即将使用表释放我的解决方案,除非一些顽固的CSS狂热者带着工作答案来解救:-)
更新
很棒的答案,在这次更新时有4个.我在Firefox和Chrome上试用了所有4个,每个答案都可以接受.但我只能选择一个作为接受的答案,我将使用仅使用css和绝对定位(没有flexBox或css-tables)的简单而简单的那个.
非常感谢@matthewelsom,@ Pangloss,@Shrinivas,@ Paulie_D;我相信任何偶然发现你的答案的人都会发现它对他们的用例很有用.为每个人投票,您的努力表示赞赏!