我有两列。一个固定大小(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
的宽度。有没有其他方法让浮动元素填满剩余的空间?
这是一个说明问题的图画:
感谢您的帮助。
答案 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;
}