手机浏览器获取自适应 div 的显示高度

一、手机浏览器获取自适应 div 的显示高度

1、需要一个DIV根据里面的元素自动适应高度，所以，肯定无法给这个DIV定义一个实际高度。而随便嵌套一个DIV却发现并不适应高度。这事就郁闷了。下面给出一些方法。大致的例子是：<div id="main">

2、<div id="content"></div>

3、</div>当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。我们可以通过三种方法来解决这个问题。

4、增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。

5、<div id="content"></div>

6、<div style="font: 0px/0px sans-serif;clear: both;display: block"></div>

7、</div>增加一个容器，在代码中存在，但在视觉中不可见。

8、<div id="content"></div>

9、<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>

10、</div>增加一个BR并设置样式为clear:both。

11、<div id="content"></div>

12、<br style="clear:both;"/>

13、</div>以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码。现在，你可以用下面的方法来实现DIV自适应高度效果#main{height:100%;

二、JS获取body的高度

1、document.body.clientWidth;//网页可见区域宽

2、document.body.clientHeight;//网页可见区域高

3、document.body.offsetWidth;//网页可见区域宽(包括边线的宽)

4、document.body.offsetHeight;//网页可见区域高(包括边线的高)

5、document.body.scrollWidth;//网页正文全文宽

6、window.screen.availHeight;//屏幕可用工作区高度

7、window.screen.availWidth;//屏幕可用工作区宽度

8、alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin

9、alert($(document.body).width());//浏览器时下窗口文档body的高度

1、alert($(window).height());//浏览器时下窗口可视区域高度

2、alert($(document).height());//浏览器时下窗口文档的高度

3、alert($(document.body).height());//浏览器时下窗口文档body的高度

4、alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin

5、alert($(window).width());//浏览器时下窗口可视区域宽度

6、alert($(document).width());//浏览器时下窗口文档对于象宽度

7、alert($(document).scrollTop());//获取滚动条到顶部的垂直高度

8、alert($(document).scrollLeft());//获取滚动条到左边的垂直宽度

三、js 如何获取浏览器的高度

1、网页可见区域宽： document.body.clientWidth

2、网页可见区域高： document.body.clientHeight

3、网页可见区域宽： document.body.offsetWidth(包括边线的宽)

4、网页可见区域高： document.body.offsetHeight(包括边线的高)

5、网页正文全文宽： document.body.scrollWidth

6、网页正文全文高： document.body.scrollHeight

7、网页被卷去的高： document.body.scrollTop

8、网页被卷去的左： document.body.scrollLeft

9、网页正文部分上： window.screenTop

10、网页正文部分左： window.screenLeft

11、屏幕分辨率的高： window.screen.height

12、屏幕分辨率的宽： window.screen.width

13、屏幕可用工作区高度： window.screen.availHeight

14、屏幕可用工作区宽度： window.screen.availWidth