Question

我有一个带有固定宽度的左右侧边栏和一个流畅的主要内容区域的布局，它占用了两者之间的可用空间，如下所示，都是浮点数：左 -

#left-sidebar {width: 200px;}
#right-sidebar {width: 300px;}
#main-content {margin-left: 200px; margin-right: 300px}

如果我填充#main-content，一切都按预期工作。

但是如果#main-content的内容很少，那么它的宽度就会崩溃，并且会使我的布局变得粗糙。

我在#main-content

的末尾使用了一个非常不优雅的黑客

<div>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>

并将其可见性设置为隐藏。

这样，它会扩展到完整的可用宽度，但我希望不那么讨厌。

（不用说，设置#main-content width，或者将某个元素的宽度设置为100％这样简单的解决方案就不是解决方案了。）

Answer 1

让你的css如此

#left-sidebar {float:left;width: 200px;}
#right-sidebar {float:right;width: 300px;}
#main-content {display:block;overflow:hidden;}

然后在HTML中，非常重要，首先初始化侧边栏，然后才开始内容div。您也可以考虑使用带有clearfix类的包装器。

Answer 2

您可以使用CSS3 Calc将宽度设置为100％减去侧边栏的宽度：

/* Assuming 200px for each sidebar */

#main-content {
    width: calc(100% - 400px)
}