我试图实现以下布局,如截图所示.
主要特点是
>屏幕分为3个区域(列);
>左/右列是固定宽度;
>中间列根据浏览器宽度扩展
>右列细分为两个区域
>底部区域是固定尺寸,始终位于底部
>顶部区域根据浏览器高度扩展
使用HTML表格花了我大约2个小时来生成上面的截图,具有上述功能.
在用CSS填充两天之后,我无法看到它如上所述,我对CSS和相关屏幕截图的尝试如下:
Meta name="viewport" content="width=device-width,initial-scale=1">
CSS截图:
CSS尝试的问题是:
>中间col不扩展(鲑鱼色部分);
>相反,白色的颜色突然出现;
>总是不能让粉红色的区域留在底部
>不能让黄色区域上下拉伸
>不需要的包装(即右边区域位于左下方,中间区域)
因此,我即将使用表释放我的解决方案,除非一些顽固的CSS狂热者带着工作答案来解救:-)
更新
很棒的答案,在这次更新时有4个.我在Firefox和Chrome上试用了所有4个,每个答案都可以接受.但我只能选择一个作为接受的答案,我将使用仅使用css和绝对定位(没有flexBox或css-tables)的简单而简单的那个.
非常感谢@matthewelsom,@ Pangloss,@Shrinivas,@ Paulie_D;我相信任何偶然发现你的答案的人都会发现它对他们的用例很有用.为每个人投票,您的努力表示赞赏!
最佳答案
看看这个fiddle.
它使用基本的CSS和HTML以及NO框架.
允许这种类型定位的关键元素是这些css属性:
左,右,上,下.
该演示使用这些属性.
这是片段.
body {
background: beige;
margin: 0;
}
#header {
width: 100%;
height: 60px;
text-align: center;
background: #A7C942;
color: #fff;
font-family: "Trebuchet MS",sans-serif;
font-size: 2em;
}
#leftDiv {
position: absolute;
float: left;
width: 150px;
top: 60px;
bottom: 0;
background: aquamarine;
}
#midDiv {
position: absolute;
float: left;
top: 60px;
bottom: 0;
left: 150px;
right: 365px;
min-width: 50px;
background: lightsalmon;
}
#rightDiv {
position: absolute;
float: right;
width: 365px;
top: 60px;
bottom: 0;
right: 0;
background: green;
}
#topRow {
position: absolute;
width: 100%;
top: 0;
bottom: 50px;
min-height: 20px;
background-color: lightgoldenrodyellow;
}
#bottomRow {
position: absolute;
background-color: lightpink;
width: 100%;
height: 50px;
bottom: 0;
}
原文链接:https://www.f2er.com/html/426887.html