1.固定高度
左側固定+右側欄自適應寬度
title
>
<
style
type
="text/css"
>*
#mainbody
#leftcol
#rightcol
style
>
head
>
<
body
>
<
divid
="mainbody"
>
<
divid
="leftcol"
>
div>
<
divid
="rightcol"
>
div>
div>
body
>
html
>
截圖：
這裡只截了ie6的。
注：如果布局元素不是body子級，加個position:relative;即可。
除了使用定位以外，用浮動float:left也可以，原理都是脫離文件流，把控制項留給其他元素。
但是有個問題， 由於absolute使得外面容器的高度取決於那個自適應的元素，比如我把高度改為300px看一下。
2.我們來拿float:left;這個方案討論一下
我們知道對於浮動元素，脫離文件流，父元素捕捉不到其高度height,所以如果float的那個元素比較高，勢必超出容器的邊界。
我們思考，如果富容器也是float，是不是就可以擺脫這種現狀，但是如果無限制的float，勢必需要頂層做個清理。
所以我們採用多套一層float容器的方式實現：
我們上**：
左側固定+右側欄自適應寬度
title
>
<
style
type
="text/css"
>*
body
#mainbody
#layoutcontainer
#leftcol
#rightcol
style
>
head
>
<
body
>
<
divid
="mainbody"
>
<
divid
="layoutcontainer"
>
<
divid
="leftcol"
>
div>
<
divid
="rightcol"
>
div>
div>
div>
body
>
html
>
上圖：
注：解決可能的ie莫名白條問題。
對ie自適應列單獨設定：
*margin-left:5px;/*兩列之間的間距*/*float:left;
網頁布局 左側固定，右側自適應
第一種方法 採用絕對定位 bfc overflow auto doctype html html lang en head meta charset utf 8 title document title style left right style head body div class left ...
html布局,左側固定右側自適應
前幾天看到我們的ui稿，要實現左側固定樹結構，右側自適應。想著自己寫過幾次但是每次都會忘記，在這裡做個筆記。第一種方法 doctype html html lang en head meta charset utf 8 title title title script src script styl...
css頁面布局之左側定寬，右側自適應
二列布局的特徵是側欄固定寬度，主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。之所以將二列布局和三列布局寫在一起，是因為二列布局可以看做去掉乙個側欄的三列布局，其布局的思想有異曲同工之妙。對於傳統的實現方法，主要討論上圖中前三種布局，經典的帶有側欄的二欄布局以及帶有左右側欄的三欄...