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

来源：互联网发布：网络女征婚骗局案例编辑：程序博客网时间：2024/06/06 14:08
做C/S项目其实最让人蛋疼的无非就是兼容问题，各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。
<!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>