自适应屏幕高度铺满全屏

思路:获取浏览器的高度,和页面的高度做对比

   如果浏览器的高度大于页面内容的高度,则把浏览器的高度赋值给页面高度

如果当前页面高度大于浏览器高度,就使用当前页面自己的高度

window.onresize=function(){//onresize 事件会在窗口或框架被调整大小时发生。
        var W_height = $(window).height();//获取窗口(浏览器)的宽度   低版本的IE会不支持
        var S_height = $(".sider").outerHeight();//获取左边导航栏的高度(包括内边距,边框和外边局)
        if(S_height >= W_height){//判断当导航栏的高度大于等于浏览器高度时
            $(".sider").css("minHeight",S_height);
        }else{
            $(".sider").css("minHeight",W_height);
        }
        /*
        当页面内容高度固定且很小时
        var W_height = $(window).height();//获取窗口(浏览器)的宽度
        $(".sider").css("height",W_height);
        */
        
    };

 相关内容复习

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

其他 Window 方法

一些其他方法:

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

时间: 2024-11-05 19:28:30

自适应屏幕高度铺满全屏的相关文章

关于Android对话框宽度无法铺满全屏的问题

之前做自定义对话框需要宽度铺满全屏时,基本是这样操作的. AlertDialog dialog = new AlertDialog.Builder(context).create();         dialog.show();         Window window = dialog.getWindow();         WindowManager.LayoutParams lp = window.getAttributes();         lp.width = WindowM

CSS(十三).高度如何铺满全屏

该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别.所以,要想写出跨浏览器的CSS,你必须采用标准模式.好像太绝对了,呵呵.好吧,要想写出跨浏览器CSS,你最好采用标准模式. 目前能够找到的有两种方案: A.利用css百分比实现 B.利用css vh 单位实现(直接设置即可,非常简单快捷) vh,是css中的相对长度单位,表示相对

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

怎么样imageview实现铺满全屏

<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"//设置此属性就可以了,虽然显示了满屏,但是会破坏资源文件的比例 android:src="@drawable/abc" />

容器铺满全屏

.container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }

js自适应屏幕高度

//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ var h = document.documentElement.clientHeight-160; $("#i_con").height( h + 38);// iframe id }

怎样使遮罩层铺满全屏,尝试过,成功

在一个html页面中,只有一个div,想是div充满全屏,常规的想法是设置高度宽度为100% ,代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <body bgcolor="red"> <div id="bg" style="width:100%;height:100%;"> &

vitamio videoView 用隐藏除videoview的控件,并旋转屏幕方向实现的全屏功能,出现的画面不能填充满videoview(画面不完整)

使用vitamio 封装的播放器 当切换到全屏模式,有时候会出现播放的画面不是全屏的情况, 全屏时,画面只占左半部分并出现拉伸效果,还显示不全,等等其他情况 阅读分析源代码发现是getHolder().setFixedSize(mSurfaceWidth, mSurfaceHeight); 的2个参数没有改变导致该方法调用没起作用 解决办法在setVideoLayout 里面重新调用getHolder().setFixedSize(this.getWidth(), this.getHeight(

ScrollView属性fillViewport解决android布局不能撑满全屏的问题

转:http://blog.sina.com.cn/s/blog_6cf2ea6a0102v61f.html 开发项目中遇到一个问题,布局高度在某些国产酷派小屏幕手机上高度不够全部显示,于是使用了ScrollView嵌套LinearLayout,但问题又出现了,在大屏幕手机如三星note3手机上下面会留白,问题的解决办法是在第一层LinearLayout里面嵌套多个LinearLayout,最重要的是将ScrollView中android:fillViewport设置为true. 当Scroll