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