我正在尝试根据屏幕截图实现以下布局。
主要特点是
- 屏幕分为 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不膨胀(鲑鱼色部分)；
- 取而代之的是突然出现白色；
- 不能让粉色区域一直停留在底部
- 无法让黄色区域上下拉伸(stretch)
- 不需要的环绕(即右侧区域位于左侧中间区域下方)
因此，我将使用表格释放我的解决方案，除非一些顽固的 CSS 狂热者提供有效的答案来拯救:-)
更新 很好的答案，在这次更新时有 4 个。我在 Firefox 和 Chrome 上尝试了所有 4 个，每个答案都是可以接受的。但我只能选择一个作为可接受的答案，我会选择仅使用 css 和绝对定位(没有 flexbox 或 css-tables)的简单明了的答案。
非常感谢@matthewelsom、@Pangloss、@Shrinivas、@Paulie_D；我相信任何偶然发现您的答案的人都会发现它对他们的用例很有用。为大家点赞，感谢您的努力!
最佳答案
看看这个 fiddle .
它使用基本的 CSS 和 HTML 并且没有框架。
允许这种定位的关键元素是这些 css 属性:
左、右、上、下。
演示使用这些属性。
这是片段。
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>关于html - 使用 CSS 布局(或者我应该放弃并使用表格？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31165379/