Chrome中的流体布局问题

时间:2010-09-20 11:57:54

标签: css google-chrome

我有两列。一个固定大小(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

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

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

尝试类似

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

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

答案 1 :(得分: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;
}