javascript获取设置div的高度和宽度兼容任何浏览器
字体：[ ] 类型：转载 时间：
Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器，感兴趣的朋友不妨看看下面的代码或许有意想不到的收获
Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器？看代码：
代码如下: &div id="div1" style="height:300width:200"&&/div& &div id="div2" style="height:30width:20"&&/div&
获取div1的宽高度：
代码如下: alert(document.getElementById("div1").offsetHeight); //兼容FF、IE等 alert(document.getElementById("div1").offsetWidth); //兼容FF、IE等
设置div1的宽高度为div2的宽高度：
代码如下: document.getElementById("div1").style.height=document.getElementById("div2").offsetH //仅IE document.getElementById("div1").style.height=document.getElementById("div2").offsetHeight+ "px"; //兼容FF、IE等 document.getElementById("div1").style.width=document.getElementById("div2").offsetW //仅IE document.getElementById("div1").style.width=document.getElementById("div2").offsetWidth+ "px"; //兼容FF、IE等
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具47477人阅读
做C/S项目其实最让人蛋疼的无非就是兼容问题，各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
.divGlobal,.DivTop,.DivBottom{min-width: 760width: expression(document.body.clientWidth & 760? &760px&: &100%& )/*最小宽度设置*/;width:100%;}
.divGlobal{/*border:1px solid #ff0000;*/}
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}
.DivBottom {clear:}
.DivMainLeft{float:}
.DivMainRight{margin-left:210}
.DivFiexWidth{width:200}
.DivMainRightChild{}
.clear{clear:}
ul.ul1{margin:0margin-left:0padding-left:0 /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
li.li1{margin-left:0list-style-type:}
li.liBg {margin-left:0background-color:#ffDD00;list-style-type:padding:5}
// alert(document.body.clientWidth);
//alert(document.body.clientWidth & 760? &760px&: &100%& );
&div class=&DivTop&&
&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&
&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&
&!-- &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&
&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&
&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&
&/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&
&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&
&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&
&div class=&DivBottom&&
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：470910次
积分：4444
积分：4444
排名：第5320名
原创：95篇
转载：28篇
评论：231条
(1)(1)(1)(1)(1)(1)(1)(2)(1)(1)(2)(1)(3)(4)(1)(1)(2)(1)(3)(1)(1)(1)(1)(1)(2)(2)(2)(1)(1)(6)(5)(2)(1)(5)(4)(5)(6)(6)(13)(5)(2)(2)(3)(6)(1)(1)(2)(1)(5)div css布局网页如何实现网页自动适-中国学网-中国IT综合门户网站
> 信息中心 >
div css布局网页如何实现网页自动适
来源：互联网 发表时间： 0:18:42 责任编辑：鲁晓倩字体：
为了帮助网友解决“div css布局网页如何实现网页自动适”相关的问题，中国学网通过互联网对“div css布局网页如何实现网页自动适”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:div css布局网页如何实现网页自动适应屏幕高度和宽度，具体解决方案如下：解决方案1：想做一张左右布局的网页，可以适应不同屏幕分辨率，只要能在 以上的分辨率能显示并且左右两边能比例显示就行了。各位有什么建议或者方案么?有代码参考就更好了。。为避免浪费分数，可行的加分200解决方案2：追分只能追100好像?
说说怎么解决吧，网页里面的宽度是可以用百分比决定的，可以设置这个容器的宽度占屏幕宽度的百分之多少，但是因为百分比的宽度是要有参考对象的，所以在设置百分比的宽度时，要先设置body的宽度为100%。
照你的要求:一屏分为两栏显示，那么用两个DIV来做，一个DIV的宽度就是50%，两个在一起就正好100%了，如果你想这两个DIV之间有间距，那么就设置宽度为48%就行，具体自己把握，然后设置左边的DIV左浮动，右边的DIV右浮动即可。
高度是可以设置固定像素的，比如一个div的宽度为48%，高度为50px都行的，可以混用，只要记住使用百分比定义宽高长度就要设置对应的body的宽高为100%就行了
1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答
相关文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号[已解决问题]
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head& &meta http-equiv="Content-Type" content="text/charset=UTF-8"/& &title&test&/title& &style type="text/css"& .header { width: 100%; background: #567; height: 100 }
.col1, .col2, .col3 { float: width: 80 background: #DDD; height: 100%; margin-right: 10 word-wrap:break- overflow: padding-bottom:100%; margin-bottom:-98%; font-size:12 } .foot{height:100 background-color:#} .middle{overflow: zoom:1;} &/style&&/head&&body&
&div class="header"&header&/div&&div class="middle"& &div class="col1"&1&/div& &div class="col2"&col2&/div& &div class="col3"&3&/div&&/div&&/body&&/html&
就像上面的代码，怎么让col1，col2的高度垂直铺满？
css有方法实现吗？还是要通过js。。。
提问于： 17:08
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/charset=UTF-8"/&
&title&test&/title&
&style type="text/css"&
*{margin:0px;padding:0px;}
width: 100%;
background: #567;
height: 100px;
#col1, #col2, #col3 {
float: left;
width: 80px;
background: #DDD;
margin-right: 10px;
word-wrap:break-word;
font-size:12px;
#foot{height:<span style="background-color: #f5f5f5; color: #px; background-color:#ccc;clear:both;}
#middle{ zoom:1;}
&div class="header" id="XX"&header&/div&
&div id="middle"&
&div id="col1"&col1&/div&
&div id="col2"&col2&/div&
&div id="col3"&col3&/div&
&div id="foot"&&/div&
total = document.documentElement.clientH
colHeight = total-100-document.getElementById("col1").offsetT
document.getElementById("col1").style.height=colHeight+"px";
document.getElementById("col2").style.height=colHeight+"px";
document.getElementById("col3").style.height=colHeight+"px";
在家里 没有什么Editor，凑合着看吧& 稍微改动了点代码& 为了方便&& 把class都换成id了
奖励园豆：5
|园豆：687
其他回答(2)
园豆：34958
可以用一下CSS 设置的 这样设置了css .container 样式的DIV元素就会铺满 浏览器屏幕的
html, body { margin:0; padding:0; } .container { height:100%; /*width: 100%;*/ border: 1 position: }
&&&您需要以后才能回答，未注册用户请先。