一側(cè)固定寬度一側(cè)自適應(yīng)寬度的方法分析.docx

CSS2.0對于一側(cè)固定寬度、另一側(cè)自適應(yīng)寬度的方法分析實現(xiàn)效果左側(cè)固定寬度，右側(cè)隨瀏覽器自適應(yīng)寬度的方法，測試瀏覽器測試過程瀏覽器IE9與IE6制作結(jié)果測試Chrome opera FF，IE6 IE8 IE9基本思路和方法一側(cè)浮動，另一側(cè)自動寬度并進行外補丁主框架對于外殼#container width:98%; margin:0 auto; border:1px solid #900; height:45px; 這里外殼寬度是可以隨意設(shè)的，可以是百分比，也可以是固定數(shù)值px另外，這里的清除 clr是無效的，在IE8下，#container的高度依然是不擴充的，原因未知，#container在這里的左右主要是可以控制#left 和#right的總寬度可以不用滿屏，在左右兩次可以留白，當然后面的方法中，通過#left和#right的自身控制也是可以實現(xiàn)的關(guān)鍵的css設(shè)置#left width:240px; _margin-right:-3px; float:left; display:inline;#rightmargin-left:240px; _margin-left:237px;紅色部分都是為了糾正IE6的bug，如果沒有，那么就會出現(xiàn)縫隙，原因未知這里#left的合模型設(shè)置是非常寬松的，可以任意設(shè)置padding 和margin，比如#left width:240px; _margin-right:-3px; float:left; display:inline;Margin：10px; padding:10px; border:3px solid #060;只不過在#right的樣式中，需要設(shè)計成#rightmargin-left:286px; /*10+10+3+240+3+10+10*/ _margin-left:283px;同樣#left的高度也是十分寬松的，可以任意設(shè)置，不會影響效果這里對于#right的width的設(shè)置是本文的重點，如果width=100%；效果也是可以實現(xiàn)的，但是如果#right設(shè)置了padding或者margin或者border，那么總寬度就超過了屏幕寬度，在IE6下就會出現(xiàn)錯位所以這里#right設(shè)置成 auto或者不設(shè)，（基于保險起見，還是設(shè)置auto吧）這樣，#right無論設(shè)置如何的padding或者margin或者border，頁面都不會錯位，這就后面的嵌套做復(fù)雜的布局而又能讓空隙中留白就非常方便甚至里面嵌套的div，也同樣如此，設(shè)置了100%；就不可以自身在設(shè)置padding和margin，設(shè)置了auto同樣能撐滿窗口，也可以設(shè)置padding或者margin或者border特殊的table是可以設(shè)置100%；設(shè)置table td標簽還可以設(shè)置padding，這是和div不同的，所以對于#right以及里面的div，設(shè)置width：auto布局就容易多了，而結(jié)合table可以設(shè)置100%；對于復(fù)雜的布局就可以更加靈活下面我們再來談高度#container的高度是不會自適應(yīng)的，這個我們已經(jīng)討論過了#right如果設(shè)置了固定高度，IE6下，內(nèi)容過多是可以撐開的，但IE8會溢出，如果設(shè)置了overflow-y：auto出現(xiàn)滾動條，IE6下則會出現(xiàn)錯位，原因不明如果為了防止ie8溢出，#right不設(shè)高度，IE6就會出現(xiàn)錯位，解決方法是給IE6的一個高度的hack，這樣IE6可以撐開，其他瀏覽器會自適應(yīng)#right width:auto; _ height:300px; margin-left:286px; _margin-left:283px; 繼續(xù)探討會發(fā)現(xiàn)，#right還