css - Chrome 中的流体布局问题

Question

我有两列。一个固定大小 (220px)，另一个填满剩余空间。

<div id="left-panel">

</div>

<div id="main-panel">
    Content
</div>

CSS:

#left-panel {
    float: left;
    width: 220px;
    height:auto !important;
    height:750px;
    min-height:   750px;
    border-right: 2px solid #d1d1d1;
    padding: 0px 0px 0px 30px;
}

#main-panel {
    margin: 20px 20px 0px 280px;
    overflow: hidden;
}

问题是在 Google Chrome 中，主面板不会展开以填满所有区域。它创建了宽度为 #left-panel 的右边距。

在其他浏览器中，我无法 float 主面板或内容无法扩展到 #main-panel 的宽度。有没有其他方法让 float 元素填满剩余空间？

下图说明了这个问题:

http://img704.imageshack.us/img704/700/esquema1a.jpg http://img704.imageshack.us/img704/700/esquema1a.jpg

感谢您的帮助。

Answer 1

您的代码的问题是您添加到可变宽度列的 overflow: hidden。删除它，它将正常工作。

此外，您应该尝试稍微清理一下您的代码 - 那里有很多无用的属性。这种技术的基本实现是这样的:http://jsfiddle.net/8LF9F/1/

#fixed {
    width: 220px;
    float: left;
}

#variable {
    /* Width of #fixed + any margin you want */
    margin-left: 240px;
}

div {
    border: 1px solid #333;
}