具有恒定侧边栏宽度的 CSS 两列布局

【问题标题】：CSS two column layout with constant sidebar width具有恒定侧边栏宽度的 CSS 两列布局
【发布时间】：2012-02-16 18:11:47
【问题描述】：

如何使用divs（或html5 section）定义设计

|内容 - 填充区域 | |sidebar width 200px 坚持正确的|

【问题讨论】：

标签： html css

【解决方案1】：

这样写：

div{
    height:80px;
    background:red;
}
.fixed{
    float:right;
    margin-left:20px;
    width:200px;
}
.dynamic{
    background:green;
    overflow:hidden;
}

查看http://jsfiddle.net/gtmXE/

【讨论】：

在没有侧边栏的情况下，如何让DIV的内容填满整个宽度？
检查我的小提琴并从 HTML 中删除固定的 div。然后你会得到你想要的

【解决方案2】：

<div id="sidebar" style="float:right; width:200px;">
<div id="content" style="margin-right:220px">
    main content
</div>

【讨论】：

在没有侧边栏的情况下，如何让DIV的内容填满整个宽度？
你最好制作两个站点模板，一个有侧边栏，另一个没有。但如果你坚持，你可以诉诸javascript。比如 if( $('#sidebar') == undefined ){ $('#content').css('width', 100%);}