html body height width

最新推荐文章于 2023-06-15 21:37:23 发布
最新推荐文章于 2023-06-15 21:37:23 发布
阅读量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
    评论
专栏目录
HTML中表格width和height具体用法
SpeedyElane的博客
04-14 5646
在对一整个网页进行框架设计时可能会用到表格的嵌套用法，其中要求对width和height属性值个人觉得比较重要. <table>标签width：在table中用来设置宽度的最大值，不能改变即使字数超过也不能改变但如果插入图片则会根据图片大小改变宽度 height：与width相反，设置高度最小值，而且会根据字数多少而自动延伸，当内容没有达到此高度值会自动扩充。<tr>标签width：因为<tabl
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 | html文档中html和body标签的默认尺寸是多少？
青春木鱼的博客
06-15 2518
html文档中，html和bod标签，在不做任何设置的情况下，html根元素默认宽度为屏幕宽度，默认高度为8px（body元素的上margin 8px），body的默认宽度=屏幕宽度 - 左margin 8px - 右margin 8px。
body标签width属性的几种设置
m0_61929867的博客
02-26 2893
1、不设置body标签的width属性，等价于设置一个非零值并且不带单位，会呈现出比浏览器的宽度稍微少一点，即两边留白一点的宽度，而且是响应式的。 2、设置成一个比浏览器宽度小的固定值，则会固定此大小，不会是响应式的，且当浏览器宽度小于设置的body的宽度时，出现滚动条，不会出现响应式，且始终和浏览器边线有一定的缝隙。 ...
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....
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`规则定义动画的关键帧，然后...
html 高宽详解
江城宴的博客
12-14 2929
详解： 网页可见区域宽(body的宽度)：document.body.clientWidth 网页可见区域高(body的高度)：document.body.clientHeight 网页可见区域宽(body的宽度+边线的宽)：document.body.offsetWidth 网页可见区域高(body的高度+边线的宽)：document.body.offsetHeight 网页正文全文宽
HTML：body标签(文本标签)
weixin_46178977的博客
01-17 428
#前端 ##HTML ###body标签 标题标签 <h1>标题</h1> <h2>标题</h2> ... <h6>标题</h6> 标题标签共有六个，会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能（块级标签） 属性： align: center(居中)、left(居左)、right(居右); 注意： 标签...
移动端body宽度不正常问题解决
ROVAST的专栏
03-06 4107
在一个项目中遇到下述问题： PC端的页面body居中，但是在移动端访问时出现不居中的情况（iPhone和iPad）。 最后发现是其中定义了一个wrap class的宽度为1200px，但是body中没有定义最小宽度。 更改body中的min-width宽度大于上面定义的宽度，为1300px，即可解决这个问题 感谢厂长！
闲来无事，实现一下百度地图~
m0_58856160的博客
04-01 883
一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开网址：http://lbsyun.baidu.com/ 然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证 创建账号完成之后 获取到AK码 准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可 二、实现首图效果（可以参考开发者指南） 编写HTML页面的基础代码 1，在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。 <!DOCTYPE html>
MFC嵌入百度地图，交互
u013915524的博客
05-13 1727
MFC 接入百度地图 1 第一步首先去百度地图官网申请秘钥http://developer.baidu.com/map申请密匙 2 创建一个对话框mfc 程序 3插入浏览器控件 创建类和控件 4 准备百度网页放入项目中 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"...
html、body默认尺寸
cdhawk的博客
12-03 1665
html、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> <
【HTML】HTML基础
xueyinglys的博客
06-07 434
html基础
html中设置body最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...
weixin_27743991的博客
05-31 2350
这里以vue-cli初始化的项目为例：1. body,htmlhtml,body {height: 100%;width: 100%;}2. App.vue中#app {height: 100%;width: 100%;}3. Home.vue组件title.home {min-width: 1024px; // 设置的最小宽度，小于1024时，会出现滚动条min-height: 100%;bac...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值