一侧固定宽度一侧自适应宽度的方法分析

CSS2.0对于一侧固定宽度、另一侧自适应宽度的方法分析实现效果左侧固定宽度，右侧随浏览器自适应宽度的方法，测试浏览器测试过程浏览器IE9与IE6制作结果测试ChromeoperaFF，IE6IE8IE9基本思路和方法一侧浮动，另一侧自动宽度并进行外补丁主框架divid=containerdivid=left/divdivid=right/divdivclass=”clr”/div/div对于外壳#container{width:98%;margin:0auto;border:1pxsolid#900;height:45px;}这里外壳宽度是可以随意设的，可以是百分比，也可以是固定数值px另外，这里的清除clr是无效的，在IE8下，#container的高度依然是不扩充的，原因未知，#container在这里的左右主要是可以控制#left和#right的总宽度可以不用满屏，在左右两次可以留白，当然后面的方法中，通过#left和#right的自身控制也是可以实现的关键的css设置#left{width:240px;_margin-right:-3px;float:left;display:inline;}#right｛margin-left:240px;_margin-left:237px;｝红色部分都是为了纠正IE6的bug，如果没有，那么就会出现缝隙，原因未知这里#left的合模型设置是非常宽松的，可以任意设置padding和margin，比如#left{width:240px;_margin-right:-3px;float:left;display:inline;Margin：10px;padding:10px;border:3pxsolid#060;}只不过在#right的样式中，需要设计成#right｛margin-left:286px;/*10+10++3+240+3+10+10*/_margin-left:283px;｝同样#left的高度也是十分宽松的，可以任意设置，不会影响效果这里对于#right的width的设置是本文的重点，如果width=100%；效果也是可以实现的，但是如果#right设置了padding或者margin或者border，那么总宽度就超过了屏幕宽度，在IE6下就会出现错位所以这里#right设置成auto或者不设，（基于保险起见，还是设置auto吧）这样，#right无论设置如何的padding或者margin或者border，页面都不会错位，这就后面的嵌套做复杂的布局而又能让空隙中留白就非常方便甚至里面嵌套的div，也同样如此，设置了100%；就不可以自身在设置padding和margin，设置了auto同样能撑满窗口，也可以设置padding或者margin或者border特殊的table是可以设置100%；设置tabletd标签还可以设置padding，这是和div不同的，所以对于#right以及里面的div，设置width：auto布局就容易多了，而结合table可以设置100%；对于复杂的布局就可以更加灵活下面我们再来谈高度#container的高度是不会自适应的，这个我们已经讨论过了#right如果设置了固定高度，IE6下，内容过多是可以撑开的，但IE8会溢出，如果设置了overflow-y：auto出现滚动条，IE6下则会出现错位，原因不明如果为了防止ie8溢出，#right不设高度，IE6就会出现错位，解决方法是给IE6的一个高度的hack，这样IE6可以撑开，其他浏览器会自适应#right｛width:auto;_height:300px;margin-left:286px;_margin-left:283px;｝继续探讨会发现，#right还可以制作一个一侧固定，另一侧随着right宽度自适应宽度的布局；divid=rightdivstyle=width:200px;height:300px;background:#000;margin-right:-3px;float:left;display:inline/divdivstyle=width:auto;height:300px;margin-left:200px;_margin-left:197px;background:#660/div/div测试代码：styletype=text/css!--body,div,span,table,tr,td{margin:0;padding:0;border:0}#top{width:100%;height:45px;background:#ccc;}#container{width:98%;margin:0auto;border:1pxsolid#900;height:45px;}#left{width:240px;padding:20px;float:left;display:inline;margin-right:-3px;border:2pxsolid#666;background:#FC6}#right{width:auto;height:400px;margin-left:284px;_margin-left:281px;background:#093;padding:20px;border:30pxsolid#900}#containertable{width:100%;border:1pxsolid#903;}#containertd{border:2pxsolid#060;padding:20px;}.case{width:auto;padding:20px;background:#09F}.case_in{width:auto;padding:20px;margin:20px;background:#99C}.clr{clear:left}--/style/headbodydivid=top/divdivid=containerdivid=left/divdivid=rightdivclass=casedivclass=case_intablecellspacing=0cellpadding=0trtd /tdtd /tdtd /td/trtrtd /tdtd /tdtd /td/tr/table/div/divdivstyle=width:200px;height:300px;background:#000;margin-right:-3px;float:left;display:inline/divdivstyle=width:auto;height:300px;margin-left:200px;_margin-left:197px;background:#660/div/divdivclass=clr/div/div