我有一个看起来像这样的身体的网站：
<body> <div id="header">...</div> <div id="content">...</div> <div id="footer">...</div> </body>
在这些div中没有使用绝对的/相对的定位技巧,但是在这些div和它们的内在元素的样式中有很多浮点,清除,边距和填充.所有这些都产生一个看起来像这样的网站：
┌───────────────┐ │ header │ └───────────────┘ ┌───────────────┐ │ content │ └───────────────┘ ┌───────────────┐ │ footer │ └───────────────┘
我的问题是：如何添加一个独立的固定宽度左列(侧栏),其中包含与整个站点(页眉内容页脚)合并并将其向右移动的额外内容.
┌────┐┌─────────┐ │side││ header │ │bar │└─────────┘ │ │┌─────────┐ │ ││ content │ │ │└─────────┘ │ │┌─────────┐ │ ││ footer │ └────┘└─────────┘
我知道一个几乎理想的解决方案,但它是丑陋的,需要重新嵌套现有的div：
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
是否有可能这样优雅,只需在身体的某个地方添加一个外部边栏元素,就是这样呢？
<body> <div id="sidebar">...</div> <div id="header">...</div> <div id="content">...</div> <div id="footer">...</div> </body>
我尝试了天真的方法 – 比如造型：
#sidebar { float: left; width: 20em; }
要么
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
这种作品,但它很快就会清除：两个或者清除：在页眉/内容/页脚中遇到左边.
那么桌面解决方案有哪些替代方案？
解决方法
我喜欢使用绝对定位的侧边栏,然后将包装上的填充设置为该元素的宽度.那么我要么在其他元素上设置边距填充,要么将其添加到包装上的填充.
<div class="container">
<div id="sidebar"></div>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
.container { position:relative; padding:0 0 0 55px; }
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:50px;
background:#000;
}
#header { border:1px solid #000; width:100px; height:20px;
margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
margin:5px 0 0 0;
}
