HTML布局：将边栏列添加到现有网站 [英] HTML layout: adding sidebar column to existing site
问题描述
我有一个网站，其主体看起来像这样：
I have a site with a body that looks like that:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
这些 div s，但有很多 float s， clear s， s和 div s和它们的内部元素的样式中的 padding 所有这些都会产生一个如下所示的网站：
No absolute / relative positioning tricks are used in these divs, but there are a lot of floats, clears, margins and paddings in styles of these divs and their inner elements. All this yields a site that looks like that:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
我的问题是：如何添加一个独立的固定宽度的左侧列（侧边栏），额外的内容将收缩整个网站（header-content-footer）并将它们向右移。
My question is: how do I add one independent fixed-width left column (sidebar) with extra content that would contract whole site (header-content-footer) and shift them to the right.
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
我知道一个几乎理想的解决方案，但它是丑陋的， -nesting existing divs：
I know of one almost-ideal solution, but it is ugly and requires re-nesting existing divs:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
是否可以这样优雅，只是添加一个外部侧边栏元素在身体的某处，
Is it possible to do so elegantly, just adding one external sidebar element somewhere in body, i.e., like that?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
我尝试了朴素的方法 - 例如样式：
I've tried naive approaches - such as styling:
#sidebar { float: left; width: 20em; }
或
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
这种工作，但很快就会中断 clear：both 或 clear：left 。
This kind of works, but it breaks as soon clear: both or clear: left is encountered in header/content/footer.
有任何替代表解决方案？
So, are there any alternatives to table solution?
推荐答案
我喜欢使用绝对定位的侧边栏，然后设置填充宽度。然后我在其他元素上设置边距填充，或者将它添加到包装器的填充。
I like to use an absolutely positioned sidebar, then set the padding on the wrapper to the width of that element. Then I either set the margin-padding on the other elements, or I add it to the padding on the wrapper.
<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;
}
这篇关于HTML布局：将边栏列添加到现有网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
