html css div自适应屏幕宽度,高度

做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。

  1. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>    
  2. <HTML>    
  3.  <HEAD>    
  4.   <TITLE> New Document </TITLE>    
  5.   <META NAME=“Generator” CONTENT=“EditPlus”>    
  6.   <META NAME=“Author” CONTENT=“”>    
  7.   <META NAME=“Keywords” CONTENT=“”>    
  8.   <META NAME=“Description” CONTENT=“”>    
  9.     
  10.   <style>    
  11. .divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? “760px”: “100%” )/*最小宽度设置*/;width:100%;}    
  12.  .divGlobal{/*border:1px solid #ff0000;*/}    
  13. .DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}    
  14. .DivBottom {clear: both;}    
  15. .DivMainLeft{float:left;}    
  16. .DivMainRight{margin-left:210px;}    
  17. .DivFiexWidth{width:200px;}    
  18. .DivMainRightChild{}    
  19. .clear{clear: both;}    
  20.  ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}    
  21.  li.li1{margin-left:0px;list-style-type:none;}    
  22.  li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}    
  23.   </style>    
  24.  </HEAD>    
  25.     
  26.  <BODY>    
  27.   <script>    
  28. // alert(document.body.clientWidth);    
  29.  //alert(document.body.clientWidth < 760? “760px”: “100%” );    
  30.   </script>    
  31. <div class=“DivTop”>    
  32. top    
  33. </div>    
  34.   <div class=“divGlobal”>    
  35.    <div class=“DivMainLeft”>    
  36.     <div class=“DivFiexWidth”>    
  37.      <ul class=“ul1”>    
  38.     <li class =“liBg”>左边固定宽度</li>    
  39.     <li class =“li1”>左边固定宽度</li>    
  40.     <li class =“li1”>左边固定宽度</li>    
  41.     <li class =“li1”>左边固定宽度</li>    
  42.     <li class =“li1”>左边固定宽度</li>    
  43.     <li class =“li1”>左边固定宽度</li>    
  44.      </ul>    
  45.     </div>    
  46.    <div class=“DivFiexWidth”>    
  47.      <ul class=“ul1”>    
  48.     <li class =“liBg”>左边固定宽度</li>    
  49.     <li class =“li1”>左边固定宽度</li>    
  50.     <li class =“li1”>左边固定宽度</li>    
  51.     <li class =“li1”>左边固定宽度</li>    
  52.     <li class =“li1”>左边固定宽度</li>    
  53.     <li class =“li1”>左边固定宽度</li>    
  54.      </ul>    
  55.     </div>    
  56.    <!– <div class=“DivFiexWidth”>    
  57.      <ul class=“ul1”>    
  58.     <li class =“liBg”>左边固定宽度</li>    
  59.     <li class =“li1”>左边固定宽度</li>    
  60.     <li class =“li1”>左边固定宽度</li>    
  61.     <li class =“li1”>左边固定宽度</li>    
  62.     <li class =“li1”>左边固定宽度</li>    
  63.     <li class =“li1”>左边固定宽度</li>    
  64.      </ul>    
  65.     </div>    
  66.      <div class=“DivFiexWidth”>    
  67.      <ul class=“ul1”>    
  68.     <li class =“liBg”>左边固定宽度</li>    
  69.     <li class =“li1”>左边固定宽度</li>    
  70.     <li class =“li1”>左边固定宽度</li>    
  71.     <li class =“li1”>左边固定宽度</li>    
  72.     <li class =“li1”>左边固定宽度</li>    
  73.     <li class =“li1”>左边固定宽度</li>    
  74.      </ul>    
  75.     </div>    
  76.      <div class=“DivFiexWidth”>    
  77.      <ul class=“ul1”>    
  78.     <li class =“liBg”>左边固定宽度</li>    
  79.     <li class =“li1”>左边固定宽度</li>    
  80.     <li class =“li1”>左边固定宽度</li>    
  81.     <li class =“li1”>左边固定宽度</li>    
  82.     <li class =“li1”>左边固定宽度</li>    
  83.     <li class =“li1”>左边固定宽度</li>    
  84.      </ul>    
  85.     </div> –>    
  86.    </div>    
  87.     
  88.   <div class=“DivMainRight”>    
  89.     <div class=“DivMainRightChild” >    
  90.       <ul class=“ul1”>    
  91.      <li class =“liBg”>右边宽度自适应.</li>    
  92.      <li class =“li1”>右边宽度自适应</li>    
  93.      <li class =“li1”>右边宽度自适应</li>    
  94.      <li class =“li1”>右边宽度自适应</li>    
  95.      <li class =“li1”>右边宽度自适应</li>    
  96.      <li class =“li1”>右边宽度自适应</li>    
  97.      <li class =“li1”>右边宽度自适应</li>    
  98.       </ul>    
  99.     </div>    
  100.     <div class=“DivMainRightChild” >    
  101.       <ul class=“ul1”>    
  102.      <li class =“liBg”>右边宽度自适应.</li>    
  103.      <li class =“li1”>右边宽度自适应</li>    
  104.      <li class =“li1”>右边宽度自适应</li>    
  105.      <li class =“li1”>右边宽度自适应</li>    
  106.      <li class =“li1”>右边宽度自适应</li>    
  107.      <li class =“li1”>右边宽度自适应</li>    
  108.      <li class =“li1”>右边宽度自适应</li>    
  109.       </ul>    
  110.     </div>    
  111.     <div class=“DivMainRightChild” >    
  112.       <ul class=“ul1”>    
  113.      <li class =“liBg”>右边宽度自适应.</li>    
  114.      <li class =“li1”>右边宽度自适应</li>    
  115.      <li class =“li1”>右边宽度自适应</li>    
  116.      <li class =“li1”>右边宽度自适应</li>    
  117.      <li class =“li1”>右边宽度自适应</li>    
  118.      <li class =“li1”>右边宽度自适应</li>    
  119.      <li class =“li1”>右边宽度自适应</li>    
  120.       </ul>    
  121.     </div>    
  122.     
  123.    </div>    
  124.  </div>    
  125.     
  126.      
  127.     
  128. <div class=“DivBottom”>    
  129. DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.    
  130. 辛苦几天的结果啊    
  131. 平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.    
  132. </div>    
  133.  </BODY>    
  134. </HTML>    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  

  <style>  
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}  
 .divGlobal{/*border:1px solid #ff0000;*/}  
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}  
.DivBottom {clear: both;}  
.DivMainLeft{float:left;}  
.DivMainRight{margin-left:210px;}  
.DivFiexWidth{width:200px;}  
.DivMainRightChild{}  
.clear{clear: both;}  
 ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}  
 li.li1{margin-left:0px;list-style-type:none;}  
 li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}  
  </style>  
 </HEAD>  

 <BODY>  
  <script>  
// alert(document.body.clientWidth);  
 //alert(document.body.clientWidth < 760? "760px": "100%" );  
  </script>  
<div class="DivTop">  
top  
</div>  
  <div class="divGlobal">  
   <div class="DivMainLeft">  
    <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <!-- <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div> -->  
   </div>  

  <div class="DivMainRight">  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  

   </div>  
 </div>  



<div class="DivBottom">  
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.  
辛苦几天的结果啊  
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.  
</div>  
 </BODY>  
</HTML>  


 

展开阅读全文

没有更多推荐了,返回首页