1200字范文 > html css div自适应屏幕宽度高度

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

时间：2019-11-07 07:54:11

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

[html]view plain copy print?<!DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.0Transitional//EN”><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME=“Generator”CONTENT=“EditPlus”><METANAME=“Author”CONTENT=“”><METANAME=“Keywords”CONTENT=“”><METANAME=“Description”CONTENT=“”><style>.divGlobal,.DivTop,.DivBottom{min-width:760px;width:expression(document.body.clientWidth<760?“760px”:“100%”)/*最小宽度设置*/;width:100%;}.divGlobal{/*border:1pxsolid#ff0000;*/}.DivTop,.DivBottom,.DivMainLeft,.DivMainRight{border:1pxsolid#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><divclass=“DivTop”>top</div><divclass=“divGlobal”><divclass=“DivMainLeft”><divclass=“DivFiexWidth”><ulclass=“ul1”><liclass=“liBg”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li></ul></div><divclass=“DivFiexWidth”><ulclass=“ul1”><liclass=“liBg”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li></ul></div><!–<divclass=“DivFiexWidth”><ulclass=“ul1”><liclass=“liBg”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li></ul></div><divclass=“DivFiexWidth”><ulclass=“ul1”><liclass=“liBg”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li></ul></div><divclass=“DivFiexWidth”><ulclass=“ul1”><liclass=“liBg”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li><liclass=“li1”>左边固定宽度</li></ul></div>–></div><divclass=“DivMainRight”><divclass=“DivMainRightChild”><ulclass=“ul1”><liclass=“liBg”>右边宽度自适应.</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li></ul></div><divclass=“DivMainRightChild”><ulclass=“ul1”><liclass=“liBg”>右边宽度自适应.</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li></ul></div><divclass=“DivMainRightChild”><ulclass=“ul1”><liclass=“liBg”>右边宽度自适应.</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li><liclass=“li1”>右边宽度自适应</li></ul></div></div></div><divclass=“DivBottom”>DIV+CSS布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefoxie测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.</div></BODY></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> <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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。