HTML 布局：向现有站点添加侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18147887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML layout: adding sidebar column to existing site
提问by GreyCat
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>
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:
这些divs中没有使用绝对/相对定位技巧，但是这些s及其内部元素的样式中有很多floats，clears，margins和paddings div。所有这些都会产生一个看起来像这样的网站：
┌───────────────┐
│ 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 │
└────┘└─────────┘
I know of one almost-ideal solution, but it is ugly and requires re-nesting existing divs:
我知道一个几乎理想的解决方案，但它很丑陋，需要重新嵌套现有的 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>
Is it possible to do so elegantly, just adding one external sidebar element somewhere in body, i.e., like that?
是否可以优雅地这样做，只需在 body 的某处添加一个外部侧边栏元素，即像那样？
<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; }
or
或者
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
This kind of works, but it breaks as soon clear: bothor clear: leftis encountered in header/content/footer.
这种工作，但它很快就会中断clear: both或clear: left在页眉/内容/页脚中遇到。
So, are there any alternatives to table solution?
那么，有没有表解决方案的替代方案？
采纳答案by Gary Kenyon
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;
}
回答by James
I'd use HTML5 elements to give the markup semantic meaning.
我会使用 HTML5 元素来赋予标记语义。
<body>
<aside><!-- Nav bar --></aside>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
</body>
Then style asideand articlewith float: left.
然后，风格aside和article用float: left。
回答by Lapixel
I made a little jsfiddleto help you getting started. Also you might want to check if your div contents aren't messing up the whole CSS. Hope this helps.
我做了一个小jsfiddle来帮助你入门。此外，您可能想要检查您的 div 内容是否没有弄乱整个 CSS。希望这可以帮助。
Edit : all colors and dimensions are dummy ones used for the example. It shoudk work with any dimension.
编辑：所有颜色和尺寸都是用于示例的虚拟颜色。它应该适用于任何维度。
html :
html :
<body>
<div id="sidebar">...</div>
<div id="header">
<div id="testLeft"></div>
<div id="testRight"></div>
<div class="clearFix"></div>
</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
css :
css :
.clearFix {
clear: both;
}
#sidebar {
width: 50px;
height: 30px;
background-color: green;
float: left;
}
#header {
width: 250px;
background-color: red;
margin-left: 55px;
}
#testLeft {
width: 50px;
height: 50px;
float: left;
background-color: pink;
}
#testRight {
width: 50px;
height: 50px;
margin-left: 55px;
background-color: purple;
}
#content {
width: 250px;
height: 20px;
background-color: blue;
margin-left: 55px;
}
#footer {
width: 250px;
height: 20px;
background-color: orange;
margin-left: 55px;
}
