1.固定高度
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>左侧固定+右侧栏自适应宽度</title>
- <style type="text/css">
- *
- {
- margin:0;
- padding:0;
- }
- #mainBody
- {
- margin:0 auto;
- border:1px solid #ccc;
- padding:5px;
- }
- #leftCol
- {
- width:120px;
- height:400px;
- border:1px solid #ccc;
- background-color:#f0f0f0;
- position:absolute;
- }
- #rightCol
- {
- border:1px solid #ccc;
- background-color:#f0ffff;
- height:400px;
- margin-left:127px;
- }
- </style>
- </head>
- <body>
- <div id="mainBody">
- <div id="leftCol">
- </div>
- <div id="rightCol">
- </div>
- </div>
- </body>
- </html>
截图：
这里只截了IE6的。
注：如果布局元素不是body子级，加个position:relative;即可。
除了使用定位以外，用浮动float:left也可以，原理都是脱离文档流，把控件留给其他元素。
但是有个问题， 由于absolute使得外面容器的高度取决于那个自适应的元素，比如我把高度改为300px看一下。
2.我们来拿float:left;这个方案讨论一下
我们知道对于浮动元素，脱离文档流，父元素捕捉不到其高度height,所以如果float的那个元素比较高，势必超出容器的边界。
我们思考，如果富容器也是float，是不是就可以摆脱这种现状，但是如果无限制的float，势必需要顶层做个清理。
所以我们采用多套一层float容器的方式实现：
我们上代码：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>左侧固定+右侧栏自适应宽度</title>
- <style type="text/css">
- *
- {
- margin:0;
- padding:0;
- }
- body
- {
- padding:10px;
- }
- #mainBody
- {
- width0:950px;
- margin:0 auto;
- border:1px solid #ccc;
- padding:5px;
- position0::relative;
- overflow:hidden;
- height:1%;
- }
- #layoutContainer
- {
- float:left;
- width:100%;
- }
- #leftCol
- {
- width:120px;
- height:200px;
- border:1px solid #ccc;
- background-color:#f0f0f0;
- float:left;
- }
- #rightCol
- {
- border:1px solid #ccc;
- background-color:#f0ffff;
- height:300px;
- margin-left:127px;
- }
- </style>
- </head>
- <body>
- <div id="mainBody">
- <div id="layoutContainer">
- <div id="leftCol">
- </div>
- <div id="rightCol">
- </div>
- </div>
- </div>
- </body>
- </html>
上图：
注：解决可能的ie莫名白条问题。
对ie自适应列单独设定：
*margin-left:5px;/*两列之间的间距*/ *float:left;
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/525082，如需转载请自行联系原作者
