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的右边距。

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

这是一个说明问题的图画：

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

感谢您的帮助。

Answer 1

我认为这是因为＃main-panel中的左边距。

尝试类似

的内容

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

也许你应该包装左侧面板和主面板以避免在主面板中使用边距值。

Answer 2

您的代码存在的问题是您添加到可变宽度列的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;
}

Chrome中的流体布局问题

2 个答案: