html css div自适应屏幕宽度，高度_div适应屏幕大小-优快云博客

本文介绍了一种使用CSS实现的布局方案，该方案能够确保在不同窗口大小下，网页布局的稳定性。左侧栏固定宽度，右侧栏则能根据窗口大小进行自适应调整。此外，还为页面设置了最小宽度限制，当窗口尺寸小于设定的最小宽度时，页面会显示滚动条，避免布局错乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做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>