html - 具有固定侧边栏和流动内容的简单两列布局

Question

我看过很多创建两列布局的教程，左侧是固定侧边栏，右侧是流动内容。它们还有全高侧边栏，即侧边栏下降到主内容窗口的高度。像这个网站:

http://robertgreiner.com/

但是，其中很多似乎是为与 IE6 一起工作而设计的。这是一个这样的例子:

http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/

如果我想放弃对 IE6 的支持，是否有一种无需破解的方法来实现它。例如，如果我的目标是 IE8+，我能否以更简单、更清晰的方式实现它？

Answer 1

这是我认为你想要的:

HTML

<div id="sidebar">
    Some content
</div>
<div id="content">
    Main content
</div>

CSS

#sidebar {
    width:20%;
    height:500px;
    border:1px solid #000;
    position:fixed;
}
#content {
    margin-left:22%;
    border:1px solid #000;
    height:1500px;
}

这是一个 FIDDLE