首页 > 代码库 > css自适应

css自适应

2024-10-14 07:43:39   217人阅读

//宽度

<div style="border:1px solid red">
　　<div style="float: left;background:#00f;width:100px;_margin-right:-3px">ggds</div>
　　<div style="float: right;background:red;width:100px;_margin-left:-3px">ggds</div>
　　<div style="margin:0 100px;background:#0f0">ggds</div>
</div>

//高度

<div style="height:70px">ggds</div>
<div style="border:1px solid red;position:absolute;top:70px;bottom:0;width:100%"></div>

//IE6

html{padding-top:70px}
<div style="background:red;position:absolute;top:0;width:100%;height:70px">ggds</div>
<div style="border:1px solid red;height:100%"></div>

//最终

html,body{ height:100%;}

body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
 
<div class="top">ggds</div>
<div class="main"></div>
 
//等高布局

.contain{
　　margin:0 auto;
　　width:600px;
　　border:3px solid #00C;
　　overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{
　　float:left;
　　width:144px;
　　background:#B0B0B0;
　　padding-bottom:2000px;
　　margin-bottom:-2000px;
}
.right{
　　float:left;
　　width:450px;
　　background:#6CC;
　　padding-bottom:2000px;
　　margin-bottom:-2000px;
}

<div class="contain">
　　<div class="left">我是left</div>
　　<div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
　　<div style="clear:both"></div>
</div>

 

相关文章：http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html

　　　　http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html

　　　　http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

 

 

 

 

 

 

 

 

 

 

 

css自适应


联系
我们