html body height width

最新推荐文章于 2022-04-01 20:49:17 发布
最新推荐文章于 2022-04-01 20:49:17 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 浏览器兼容性 文章标签： html xhtml ie css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nibaohua/article/details/5871084
版权

http://www.blueidea.com/tech/site/2006/3130.asp

在一般普通页面（无DTD格式声明），document.body各个属性说明：

  • scrollHeight:  内容实际高度
  • scrollWidth: 内容实际宽度
  • clientHeight: 可见区域高度
  • clientWidth: 可见区域宽度
  • offsetHeight: 包括边线和滚动条的高度
  • OffsetWidth: 包括边线和滚动条的宽度
  • window.scrollTop, window.scrollLeft: 滚动条离最上端、左端的距离
  • window.screen.height,window.screen.width: 分辨率高度、宽度

   在有DTD格式声明的情况下，即页面中有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，document.body各个属性的说明如下：

  • scrollHeight, clientHeight, offsetHeight:  内容实际高度
  • scrollWidth, clientWidth, offsetWidth: 页面可视部分宽度
  • scrollTop: 一直为0

   这时候如果要得到页面的实际宽度，需要使用document.documentElement.clientWidth(xhtml标准)。而得到滚动条纵坐标位置，则需要使用document.documentElement.scrollTop。（在没有声明DTD的时候，这两个值反而都为0）

   documentElement对应的是html标签，而body对应的是body标签。IE在怪异模型(quick mode，也就是页面没有DTD或者写的不对)下，document.documentElement无法得到正确的clientHeight值，可能怪异模型没有把html作为盒子模型的一部分。在IE下可以通过获得document.compatMode的返回值判断是否为怪异模型：var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; var height = document.compatMode=="BackCompat" ? document.body.clientHeight : document.documentElement.clientHeight;

   也就是说如果html中有DTD说明，那么得到各个属性最好是使用document.documentElement，而如果没有的话，使用document.body。

doctor_ni
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.body和document.documentElement - [js]
nibaohua的专栏
09-08 773
<br />http://www.blueidea.com/tech/site/2006/3130.asp<br /> 在一般普通页面（无DTD格式声明），document.body各个属性说明：scrollHeight:  内容实际高度 scrollWidth: 内容实际宽度 clientHeight: 可见区域高度 clientWidth: 可见区域宽度 offsetHeight: 包括边线和滚动条的高度 OffsetWidth: 包括边线和滚动条的宽度 window.scrollTop, window
html中body的width是什么,HTML+CSS入门 如何让body width height 100%使用
weixin_31597881的博客
06-10 1928
首先我们来看一个实际的问题，让body中的一个div占全屏。#div1{background:#ccc;border:1px solid red;width:100%;height:100%;}div1运行后div1还是只占一行，height没有到达全屏。当然，我们以前用过一种方法，就是使用position:absolute,设置top:0,bottom;0这样元素的尺寸就会根据偏移来推断了。不改...
html中body的width是什么,html - Body min-width issue - Stack Overflow
weixin_29997657的博客
06-10 207
I am currently experimenting locally with Vantage theme(Wordpress)LinkI want to set minimum width of the page in order to stop scaling down content when browser window is being narrowed.It works perfe...
css中百分号使用引发对HTML和body的height，width的思考
qq_34489874的博客
11-12 315
使用eclipse生成的jsp文件，如果使用css的height：100%，width：100%对其中的div进行布局，你会发现div并没有占据页面，使用chrome发现body此时的width为浏览器宽度，但是height为0，如果希望div占据浏览器整个界面，此时可以使用如下代码： html,body{ height:100%; width:100%; } 而使用MyE...
HTML中表格width和height具体用法
SpeedyElane的博客
04-14 5646
在对一整个网页进行框架设计时可能会用到表格的嵌套用法，其中要求对width和height属性值个人觉得比较重要. <table>标签width：在table中用来设置宽度的最大值，不能改变即使字数超过也不能改变但如果插入图片则会根据图片大小改变宽度 height：与width相反，设置高度最小值，而且会根据字数多少而自动延伸，当内容没有达到此高度值会自动扩充。<tr>标签width：因为<tabl
js获取height和width的方法说明
10-27
- `$(document.body).height()`：返回HTML body元素的高度，不包括边框、内填充和外边距。 - `$(document.body).outerHeight(true)`：返回HTML body元素的总高度，包括边框、内填充和外边距。 - `$(window).width...
HTML5 body设置自适应全屏
11-21
<img src="http://huoche.7234.cn/images/jb51/jmb0ob1flez" width="100%" height="100%"/> ``` 在这个示例中，图片将始终占据整个屏幕，但这种方法可能不适用于需要滚动的内容。 最后，为了处理浮动元素带来的...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
本教程将深入讲解如何使用HTML中的`<TABLE>`标签的`WIDTH`和`HEIGHT`属性来设置表格的宽度和高度。 首先，我们要了解默认情况下，HTML表格会根据其内容自适应地调整宽度和高度。然而，为了更好地控制表格的布局和...
html css js网页设计
最新发布
07-12
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：设定视口宽度为设备宽度，初始缩放比例为1，确保在移动设备上正确显示。 - `<title>`：定义文档标题，显示在浏览器标签上。 - `<body...
douyin 跳动爱心 代码 html
12-14
<svg height="100" width="100"> , 85 65, 50 100, 15 65, 50 10" fill="red" stroke="black" stroke-width="3" /> ``` 接下来，我们需要用CSS来实现动画效果。可以使用`@keyframes`规则定义动画的关键帧，然后...
JS设置body-width为屏幕最大宽度（width自适应）
Satsuki.Cyan的博客
04-17 1万+
// 设置body-width与屏幕width一致（减去20px进行修正） document.getElementsByTagName("body")[0].style.width = (window.screen.availWidth - 20) + "px"; 摘录参考： 网页可见区域宽：document.body.clientWidth; 网页可见区域高："+ document.body....
body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
热门推荐
lamanchas的博客
11-02 1万+
width/height百分比设置参考链接1：width=100%时会出现滚动条的情况 参考链接2：html,body设置高度100%和默认的滚动条问题一：body{width:100%}但窗口出现滚动条代码:<!doctype html> <html> <head> <meta charset="utf-8"/> <title>body{width":100%;}窗口有滚动条</title> <
移动端body宽度不正常问题解决
ROVAST的专栏
03-06 4107
在一个项目中遇到下述问题： PC端的页面body居中，但是在移动端访问时出现不居中的情况（iPhone和iPad）。 最后发现是其中定义了一个wrap class的宽度为1200px，但是body中没有定义最小宽度。 更改body中的min-width宽度大于上面定义的宽度，为1300px，即可解决这个问题 感谢厂长！
body标签width属性的几种设置
m0_61929867的博客
02-26 2893
1、不设置body标签的width属性，等价于设置一个非零值并且不带单位，会呈现出比浏览器的宽度稍微少一点，即两边留白一点的宽度，而且是响应式的。 2、设置成一个比浏览器宽度小的固定值，则会固定此大小，不会是响应式的，且当浏览器宽度小于设置的body的宽度时，出现滚动条，不会出现响应式，且始终和浏览器边线有一定的缝隙。 ...
闲来无事，实现一下百度地图~
m0_58856160的博客
04-01 883
一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开网址：http://lbsyun.baidu.com/ 然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证 创建账号完成之后 获取到AK码 准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可 二、实现首图效果（可以参考开发者指南） 编写HTML页面的基础代码 1，在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。 <!DOCTYPE html>
html,body{ width: 100%;height: 100%;}的解释
qq_26239917的博客
03-13 1万+
按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？ html{ width: 100%;height: 100%;}拿谁的宽高？ 经过测试，是当前浏览器窗口的大小 看图 &amp;lt;body&amp;gt; &amp;lt;div onclick=&quot;func()&quot;&amp;gt;xxx&amp;lt;/div&amp;gt; &amp;lt;/body&amp;gt
HTML5基础（height,width设置）
HandsomeLeft的博客
03-08 2179
对于html5，height和witch有4种可以设置的单位，分别是px，百分比，em，rem。并且他们都是相对的单位类型。 px是以你当前屏幕分辨率和电脑缩放比例为基准 当你的分辨率保持不变，更改电脑的缩放比例，你会发现相应的height和width也会发生改变。 百分比是以当前标签的父标签的 ...
html5百度地图展示运动轨迹,百度地图根据经纬度获取运动轨迹
weixin_30682487的博客
06-18 1134
body, html, #allmap{width:100%; height:100%; overflow:hidden; margin:0; font-family:"微软雅黑";}走航轨迹测试var startLong = 111.149396; // 开始时的经度var startLat = 27.485042; // 开始时的纬度var endLong = 111.149396;var e...
js 百度地图第二次加载显示不全问题解决方案
shangyunxia_syx的博客
08-24 1479
使用div load方式后如果直接映入百度地图的js，发现第二次加载时显示不全，使用异步加载地图方式可以解决问题。 如下： body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} 异步加载地图 //百度地图API
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值