0

我有一个带有固定宽度的左右侧边栏的布局和一个流动的主要内容区域，它占据了两者之间的可用空间，就像这样，全部带有 float:left --

#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 宽度或其中某些元素的宽度设置为 100% 这样简单的方法不是解决方案。）

4

2 回答 2

1

让你的 CSS 像这样

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

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

于 2013-06-14T14:16:40.627 回答
1

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

/* Assuming 200px for each sidebar */

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

演示：http: //jsfiddle.net/wDMfF/

于 2013-06-14T14:26:39.057 回答