css - Chrome 中的 100% 宽度问题

Question

我正在尝试创建液体布局，以便站点的左侧根据屏幕尺寸扩展，而右侧保持固定宽度。这在 IE 中运行良好，但在 Chrome 中，左侧只是扩展内容的长度，而不是空间的全部长度。

#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}

Answer 1

这是你想要的？

http://jsfiddle.net/KnVrA/1/

leftActivity 不展开是有意义的，因为它是浮动的，如果内容不是那么长，那么它就不会展开

编辑：使用 Kyomu 的小提琴并取出一些东西并重新排列一些东西

更新：使用基于百分比的http://jsfiddle.net/KnVrA/2/

您可以在左侧添加包装器以在右侧创建填充

Answer 2

我通过在左侧添加一个包装器并从#leftActivity 中删除浮动来更正了解决方案。在包装上添加负边距，并从右侧删除负边距。

#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}