如何让div覆盖整个页面？

最新推荐文章于 2024-04-20 18:01:19 发布
原创 最新推荐文章于 2024-04-20 18:01:19 发布 · 8.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div #border #iphone #iframe #文档 #firefox

如何让div完全覆盖浏览器窗口，包括地址栏和工具栏？这个问题涉及到CSS样式设置，通常需要结合JavaScript来实现动态调整大小。提问者还关注了AJAX更新div内容、iframe中的弹出层以及iPhone序列号查询等话题。 
得到div高宽
var hA =document.getElementById("div1"); 
hA.style.width = window.screen.availWidth-20; //得到宽度 
var s_height=document.body.scrollHeight; 
if(s_height<window.screen.availHeight) 
{ 
s_height=window.screen.availHeight; 
} 
hA.style.height=s_height+"px"//设置高度 

另外
根据你的需要，你可以看看下面这个 

网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth 


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 

IE，FireFox 差异如下： 

IE6.0、FF1.06+： 

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border 

IE5.0/5.5： 
clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height 

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
7
|  评论
向TA求助

回答者： piaoyinggao | 四级

擅长领域： C#/.NET 多媒体软件 其他编程语言 电脑/网络 足球

参加的活动： 暂时没有参加的活动

其他回答  共1条
2009-2-2 09:08 skyrickie  | 五级 
可以在body的load事件中写一段代码，获取网页的大小，然后设置div的大小就可了，希望这种方法可行
0
|  评论

JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
10-18
在Web开发过程中，经常需要实现一些交互功能，其中一个常见需求就是弹出对话框或者模态框来向用户展示信息，并且在弹出的时候给整个页面加一个半透明的遮罩层，让页面内容变得模糊以聚焦用户的注意力于弹出的对话框...
javascript div 遮罩层封锁整个页面
10-29
1. **显示遮罩层**：通过设置遮罩层的`display`属性为`block`，并调整其`left`和`top`属性为`0`，确保遮罩层覆盖整个页面。 2. **隐藏遮罩层**：将遮罩层的`display`属性设置为`none`，则遮罩层不再显示。 ### 四、...
覆盖整个页面的div
zhangliao613的专栏
03-22 924
#shadowDiv { display: none; width: 100%; height: 100%; position: absolute; top: 0px : left : 0px; background-color: #FFF; filter: alpha(opacity = 70); opacity: 0.7; z-index: 65534}window.onload=functi
html如何让div元素铺满整个桌面
qq_31135027的博客
03-21 9812
参考文章：https://www.cnblogs.com/zhangmei/p/6395547.htmldiv { 　　position:absolute; 　　width:100%; 　　height:100%; }上述的css会让你的所有div元素铺满整个桌面，为了避免这个div.one { 　　position:absolute; 　　width:100%; 　　height:...
div遮罩层盖住可视或整个
weixin_34162401的博客
10-29 510
<!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&gt...
CSS 实现一个div铺满整个屏幕的三种方法（CSS Reset）
热门推荐
单枪匹码
11-01 5万+
让一个div铺满整个页面： 一、需求描述： 比如说我们现在有一个页面，页面中有一些文字，但是页面需要添加背景，并且整个页面要被背景铺满。 二、问题描述： 其实我们可以在body中添加一个div，然后设置这个div的height为auto，然后给整个div添加一个background，那么如果该div的内容足够多的话，该div就会铺满整个页面（即：整个页面都被添加的背景铺满），但是如果该div的内容...
【前端】用CSS实现div全屏铺满的方式
良月柒
04-20 6517
以上是几种常见的CSS实现div全屏铺满的方式。无论是使用绝对定位和百分比宽高、vh/vw单位，还是Flexbox布局，都可以轻松地实现div元素全屏铺满浏览器窗口的效果。你可以根据实际需求和项目要求，选择适合自己的方法来实现全屏效果。不管做什么，只要坚持下去就会看到不一样！
div覆盖整个页面，不随页面放缩
09-11
当您想要让一个`div`元素完全占据整个浏览器窗口，无论页面如何缩放或滚动，通常可以使用CSS中的几个属性来实现： 1. `position: fixed;`: 将`div`的定位设置为固定，使其相对于视口定位，不会随着页面内容的变化而...
js与css实现弹出层覆盖整个页面的方法
12-11
本文将探讨如何利用JavaScript（js）和CSS（层叠样式表）来实现一个能够覆盖整个页面的弹出层。 首先，我们需要理解CSS中的关键属性来实现这一效果： 1. `position`: 这个属性用于定义元素的位置方式。在弹出层中...
html，可以让div元素全屏吗？
最新发布
07-24
另一种方式是使用 `position: fixed` 来让 `div` 覆盖整个视口，通常用于模态框或全屏遮罩层： ```css .fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;...
弹出DIV层,可选择遮罩当前或全部页面
想飞的鱼
04-08 2430
弹出DIV层,可选择遮罩当前或全部页面 - Liehuo.Net div{ position:absolute; top:0; left:0; background:#ccc; } function test1(f){ var d = document.getElementById('test'),wh = getWH(f); d
[javascript]用子页的div遮盖整个页面
scate的专栏
05-11 725
高度用100%总是只取到ie的高度，不是页面的高度，结果出下拉条又悲剧了，于是用强硬手段top = document.body.clientTop;left = document.body.clientLeft;height = document.body.clientHeight; 最终结果在我这里底下似乎还差25-30 px的地方不知为何遮不住，只好 height = do
css 实现让一个div的大小铺满整个屏幕
自由如风的博客
12-12 1564
将会覆盖整个浏览器窗口，实现铺满屏幕的效果。
利用div实现遮罩层效果
w36680130的博客
12-25 1580
本文转载自：https://www.cnblogs.com/dige1993/p/4606032.html 作者：dige1993 转载请注明该声明。利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码： <!DOCTYPE html> <html> <head> <meta ...
html页面撑满整屏幕,让div撑满整个屏幕的方法（css）
weixin_39990410的博客
06-08 1万+
这篇文章主要介绍了关于让div撑满整个屏幕的方法(css)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在body只有一个p的时候，可以通过这样的方式让p撑满整个屏幕。1.给p设置定位。复习一下——css中position有五种属性：static:默认值，没有定位absolute:绝对定位，相对于父级元素进行定位relative:相对定位fixed:固定定位,相对于浏览器窗口进行定...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值