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

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

html css div自适应屏幕宽度，高度相关推荐

  1. Css实现自适应屏幕宽度的正方形

    思路,正方形,长宽都一样,需要找到一个标准值然后再去设置盒子模型,可以用padding,margin, width/height, 正题开始 1. 使用padding,原因,百分比是基于父元素的宽度, ...

  2. div自适应屏幕高度

    问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容 整个菜单都放在div中,div的父亲节点为b ...

  3. 如何让网页自适应屏幕宽度

    网页自适应屏幕宽度到底是怎么做到的? 1.首先,在网页代码的头部,加入一行viewport元标签: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width= ...

  4. CSS实现自适应浏览器宽度的正方形

    2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...

  5. html自动适应屏幕分辨率,css如何自适应屏幕大小？

    css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...

  6. 自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...

  7. html中div自适应代码,CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: 左右两侧,左侧固定宽度200px;右侧自适应占满 .box{ width:800px; heig ...

  8. css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100％？

    css div撑满窗口高度 Introduction: 介绍: Hello there developers! Well, certainly if you are reading this arti ...

  9. css响应式网页设计：自适应屏幕宽度、移动页面开发技巧

    html响应式网页设计:自动适应屏幕宽度 文章目录 html响应式网页设计:自动适应屏幕宽度 背景 一."自适应网页设计"的概念 二.允许网页宽度自动调整-使用meta标签:vie ...

最新文章

  1. HPC System Design
  2. from __future__ import print_function 介绍
  3. Dubbo 序列化协议 5 连问，这谁接得住啊？
  4. MySQL用户与权限管理
  5. IT职业就业-学长有话说
  6. python编辑器中文字体倒立的_如何用Python+人工识别处理知乎的倒立汉字验证码...
  7. anaconda+python3.7安装keras_win10 python3.7 Anaconda3 安装tensorflow+Keras
  8. 十行代码实现十亿图片检索，我们把它开源了
  9. Node.js文字与图片合成
  10. ObjectARX_AutoCAD创建矩形功能实现
  11. Android studio Minimum supported Gradle version is 7.2. Current version is 7.0.2.
  12. 【转】为什么火线有电压，零线没有电压呢
  13. android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
  14. SpringMVC里的Model、Map、ModelMap以及ModelAndView
  15. Linux 用ssh远程登录及scp传输文件
  16. 光纤布拉格光栅(FBG)笔记【2】：反射率
  17. PS知识点大总结（二）——通道蒙版与图形图标设计
  18. 主成分分析实战篇：南极考察站检测数据降维
  19. ubuntu挂载硬盘是什么意思
  20. Java 什么是反射及反射的应用

热门文章

  1. BERT知识蒸馏Distilled BiLSTM
  2. 微信小程序上传图片至服务器Springboot接收格式的问题
  3. 知乎简历10年互联网从业经验
  4. 开发一个智能问答机器人
  5. 多聚焦融合：科普类，对知识的总结
  6. 年报背后：顺丰疯狂的错位价格战
  7. [LightOJ1070]Algebraic Problem
  8. QT 小游戏 : 别踩白块儿~
  9. 【MATLAB图像融合】[14]PCNN脉冲耦合神经网络代码分享
  10. 深度盘点：Python 使用和高性能技巧总结