文档章节

页面DIV自适应宽高

IceRainYWC
 IceRainYWC
发布于 2014/08/08 15:34
字数 227
阅读 670
收藏 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”。 警告 验证...

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

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

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

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

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

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

痴货
2018/08/04
0
0
初始化页面body为空的问题。

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我...

marjey
2016/12/15
2
0

没有更多内容

加载失败,请刷新页面

加载更多

PDMan-2.1.1 发布:用心开源,免费的国产数据库建模工具(春节前最后一个版本)

一、软件介绍 PDMan 是一款开源免费的数据库模型建模工具,是PowerDesigner之外另一种更好的选择。支持Windows,Mac,Linux等操作系统,具有上手容易,使用简单的特点。 2018年获得码云GVP (Gi...

O龙猫O
43分钟前
8
0
OSChina 周二乱弹 —— 以后我偷小鱼干养你

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @庞巴哥 :只有这节奏瞬间变得轻松。。。。。。。。。分享Talking Eyes的单曲《In the sun (Extended Version)》: 《In the sun (Extended Ve...

小小编辑
今天
45
5
多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
8
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
10
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部