文档章节

页面DIV自适应宽高

IceRainYWC
 IceRainYWC
发布于 2014/08/08 15:34
字数 227
阅读 669
收藏 12

代码如下:

<html xmlns="
http://www.w3.org/1999/xhtml
">

<head runat="server">

    <title>窗口大小</title>

</head>

<body onload="findDimensions();">

<h2 align="center">请调整浏览器窗口大小</h2>

<hr/>

<form action="#"method="get"name="form1"id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口的高度:<input type="text"name="availHeight"size="4"/><br/>

浏览器窗口的宽度:<input type="text"name="availWidth"size="4"/><br/>

</form>

<div id="div1"style="background-color:Gray; width:616px; height: 305px;"></div>

<script type="text/javascript">

    var winWidth=0;

    var winHeight=0;

    function findDimensions() { //函数:获取尺寸

        //获取窗口宽度

        if (window.innerWidth) {

            winWidth = window.innerWidth;

        } else if ((document.body) && (document.body.clientWidth)) {

            winWidth = document.body.clientWidth;

        }

        //获取窗口高度

        if (window.innerHeight) {

            winHeight = window.innerHeight;

        }else if ((document.body) && (document.body.clientHeight)) {

            winHeight = document.body.clientHeight;

        }

        //通过深入Document内部对body进行检测,获取窗口大小

        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

            winHeight=document.documentElement.clientHeight;

            winWidth=document.documentElement.clientWidth;

        }

        //结果输出至两个文本框

        document.form1.availHeight.value=winHeight;

        document.form1.availWidth.value = winWidth;

        //设置div的具体宽度=窗口的宽度的%

        if (document.getElementById("div1")) {

            document.getElementById("div1").style.width = winWidth*0.98 + "px";

        }

    }

    window.onresize=findDimensions;

</script>

</body>

</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: 遮罩层
IceRainYWC
粉丝 13
博文 111
码字总数 49297
作品 0
石家庄
程序员
私信 提问
FrameSet替代技术

笔者注:页面尽量少用 frameset 不利于被搜索引擎搜索到。 下面是在Visual Studio中对FrameSet与Frame的警告提示: 警告 验证 (XHTML 1.0 Transitional): 不支持元素“frameset”。 警告 验证...

颖辉小居
02/06
0
0
关于报表在移动端展现需你需要知道哪些?

现在,企业或者电商平台的商家、业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。而且,这些查看分析数据的诉求,对于随时随地、方便快捷的要求也越...

拾光石艺
10/19
0
0
Html小知识总结

1、跳出新页面: target="self"不跳转 form表单提交的跳转设置 2、点击按钮跳出别的页面添加 onclick="return false" 3、display:block;块级元素,也就是说它可以设置一些宽高,独占一行,比...

思梦教育
01/22
0
0
从原理到方案,一步步讲解web移动端实现自适应等比缩放

  前言   在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案。但是都各有其缺点。   首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏...

痴货
08/04
0
0
【CSS】小妙招,各种问题总结方法处理

1.实现div文字溢出自动省略号截取 overflow:hidden; /超过部分不显示/       text-overflow:ellipsis; /超过部分用点点表示/       white-space:nowrap;/不换行/ 2.规定行数的截...

YanBigFeg
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
32分钟前
0
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
3
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
9
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
3
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部