html css div自适应屏幕宽度,高度
2013-07-11 15:52
519 查看
做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>
相关文章推荐
- html css div自适应屏幕宽度,高度
- html css div自适应屏幕宽度,高度
- html中图片自适应浏览器和屏幕,宽度高度自适应
- css实现div高度根据自适应宽度(百分比)调整
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- Div+css下HTML设计三列自适应宽度出现换行的解决办法
- 自适应宽度和高度的Panel(html、css篇)
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
- div + css宽度自适应(液态布局)
- 【css】三栏,左右两栏固定,中间宽度自适应 ||| 三栏,高度自适应 有图片,高清,无码
- css实现左边div自适应宽度,右边宽度适应左边
- 自适应宽度的左右结构DIV+CSS
- DIV+CSS左右列高度自适应问题
- HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法
- HTML/CSS控制div垂直&&水平居中屏幕
- 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
- div嵌套ul时div的宽度和高度自适应
- div自适应屏幕高度
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
- CSS 控制DIV及图片的宽度和高度