js 兼容屏幕的高度

应用商店改版

出现一个问题:屏幕很高的话,比如大显示器,

页面内容很少的话,最大化浏览器,最下面就是空白的:


 

Js代码  

  1. //兼容页面的高度,因为如果Pc端屏幕是大屏幕的话,最下面是空白的  
  2.             var $divConction=$('div.conction');  
  3.             var height=$divConction.height();//获取div的实际高度  
  4.             console.log("height:"+height);  
  5.             var docHeight=$(document).height();//浏览器当前窗口文档的高度  
  6.             var delteHeight=docHeight-height-210;  
  7.             if(delteHeight>0){  
  8. //如果是大屏,则增加div的高度,把内容撑开,使footer始终在最下面  
  9.                 $divConction.height(height+delteHeight);  
  10.             }  
  11.             console.log(docHeight);  

 

Js代码  

  1. adapteHeight:function (e) {  
  2.             var $divConction=$('div.con-fl');  
  3.             var height=$divConction.height();  
  4.             console.log("height:"+height);  
  5.             var docHeight=$(document).height();//浏览器当前窗口文档的高度  
  6.             var delteHeight=docHeight-height-254;//172  
  7.             if(delteHeight>0){  
  8.                 $divConction.height(height+delteHeight);  
  9.             }  
  10.             console.log(docHeight);  
  11.         },  

 

参考:http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html

时间: 2024-10-29 16:39:44

js 兼容屏幕的高度的相关文章

JS获取屏幕,浏览器窗口大小,网页高度宽度

 本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码.需要的朋友可以过来参考下,希望对大家有所帮助 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWi

JS实现iframe自适应高度的方法(兼容IE与FireFox)_javascript技巧

本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了.后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来.我已经用过了,真的好用.尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明). 向原创这段代码

js获得屏幕,浏览器,网页高度宽代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

js调用屏幕宽度的简单方法_javascript技巧

如下所示: <!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="Co

获取当前屏幕的高度宽度(JQuery/javascript)

获取当前屏幕的高度宽度(JQuery/网页特效) Query获取浏览器窗口宽高,文档宽高 2010-01-20 08:59 <script type="text/javascript"> $(document).ready(function()                  { alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(do

js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

  这篇文章主要介绍了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件,实例分析了javascript多种弹出层效果的实现技巧,非常具有实用价值,需要的朋友可以参考下 完整实例代码点击此处本站下载. 用法 ? 1 2 3 4 5 6 7 8 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style

js兼容火狐显示上传图片预览效果的方法

  本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-

js兼容火狐获取图片宽和高的方法

  本文实例讲述了js兼容火狐获取图片宽和高的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" />

js控制iframe的高度/宽度让其自适应内容

 这篇文章主要介绍了如何使用js控制iframe的高度/宽度让其自适应内容,需要的朋友可以参考下  代码如下: <mce:script language= "Javascript "><!--    window.onload=function()  {  parent.document.all("iframe1").style.height = document.body.scrollHeight;  parent.document.all(&q