固定+流体布局答案

【问题标题】：Fixed + Fluid layout固定+流体布局
【发布时间】：2013-06-01 23:30:43
【问题描述】：

如何创建 2 列布局，其中 1 列固定宽度，而另一列占用剩余空间？

最初，我尝试了一个流畅的布局，但不喜欢左列变得太小，所以我想保持它的宽度不变。

我试过setting the 2nd column's margin-left equal to the width of the first column，但这意味着第二列没有扩展到所有可用空间。它只占用所需的空间，这不足以保持布局的吸引力。

如何使#right 列填满#container 中的所有剩余空间？

【问题讨论】：

【解决方案1】：

最简单的方法是display:table。这可能不是最好的方法，但它确实有效。你可以在这里看到我用你的代码创建的小提琴：

你也可以在你的 CSS 中使用 calc()，但它没有得到广泛的支持。

【讨论】：

谢谢蒂姆。我想将#container 保持在 960px，#footer 也一样。
那么你真的不需要一个流动的列......你可以设置每列的宽度。除非我不理解这个问题。表格布局仍然有效，只需将表格的宽度固定为像素而不是百分比。
对不起。对于大型显示器，我希望 #container 为 960 像素。我在演示中有媒体查询，在较小的屏幕宽度下将其更改为 95%。
我认为你现在有代码可以完成这项工作......容器宽度可以通过媒体查询进行调整，右列将填满整个右侧。你甚至可以给容器一个width:95%; max-width:960px;，这样就不需要额外的媒体查询了。

【解决方案2】：

您可能需要考虑使用media queries 来根据视口大小触发其他 CSS 规则。

这应该可以满足您的要求：

@media only screen and (max-width: 960px) {

    #right { float: none; width: 100%; }

    #left { float: none; }


}

【讨论】：

谢谢尼尔斯。您能否在这里查看 970 像素以下会发生什么：doig.com.au/test/2 #right 列在 #left 列周围流动，打破了我需要保持的鸿沟。
哦，我的错。您还必须从媒体查询中的#left 中删除浮动，否则右列将换行。我将在上面更新我的答案以解决此问题。
我做了这个改变。请参阅doig.com.au/test/2 div 位于不同的行上。
这不是你想要的样子吗？
不，我希望它在同一行，谢谢 Nils。上面蒂姆的回答修复了它。