PC端和移动端自适应问题的快速解决方法

   <div id="zj1">我是子级1</div>  

   <div id="zj2">我是子级2</div>  

</div>  

//css部分   

#fj{border:4px solid red;}   

#zj1{border:2px solid yellow;}   

#zj2{border:2px solid blue;}----这种情况下，父级高度随着子级div的高度自适应的改变  

如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both

XML/HTML Code复制内容到剪贴板

<div id="fj">  

   我是父级   

   <div id="zj1">我是子级11111111111111111111111111</div>  

   <div id="zj2">我是子级222222222222222222222222222222222222222222   

  222222222222222222222222222</div>  

   <div id="clear" style="clear:both"></div>------如果去掉这句话，则父级div高度，不会随着子级的高度变化而变化   

</div>  

//css部分   

#fj{border:4px solid black;}   

#zj1{border:2px solid yellow;float:left}   

#zj2{border:2px solid blue;float:left}  

高度的自适应的方法还有很多，这里不再列举。像height:auto等等。

四：js处理高度和宽度自适应问题

XML/HTML Code复制内容到剪贴板

<div id="div1" >222222222222222222222</div>  

//js部分   

function setHeight(obj)   

{   

  var temHeight=null;   

  //FF   

  if(window.innerHeight)   

  {   

    temHeight=window.innerHeight;//包括页面高度和滚动条高度   

  }   

  else    

  {   

     temHeight=document.body&&document.body.clientHeight;   

  }   

  if(temHeight>document.body.clientHeight)//页面高度   

  {   

     oDiv.style.height=temHeight+"px";   

  }   

  else   

  {   

    oDiv.style.height=document.body.clientHeight+"px";   

  }   

}   

window.onload=function()   

{   

  var oDiv=document.getElementById("div1");   

  getHeight(oDiv);   

}  

宽度自适应代码：

XML/HTML Code复制内容到剪贴板

function  setWidth(obj)   

{   

     var screenWidth = window.screen.width;       

     var width;   

     var imgURL ;   

     if (screenWidth >= 1440)    

     {   

         width = "1400px";   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!