AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

html,body高度100%的作用

2018-03-01 2414
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

1

如果阅读css代码比较仔细，可能会发现大量css文件顶部会有如下设置:

1

2

3

html,body{

height:100%;

}

下面就介绍一下代码的作用是什么。

在标准模式下，也就是网页头部写DOCTYPE的时候，body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，因为以百分比设置元素的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，自然不会生效。

代码实例:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

body{height:100%}

div{

width:100px;

height:50%;

margin:0px auto;

background:red;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是导致div的百分比高度无效，将css代码中的第一行设置为如下即可:

1

html,body{height:100%}

原文发布时间为：2017-12-4

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：html,body高度100%的作用

文章标签：
前端开发
关键词：
HTML body
HTML body作用
青衫无名
目录
相关文章
Z2O安全攻防
|
JavaScript
JS：获取标签的6个方法+获取html+获取body
JS：获取标签的6个方法+获取html+获取body
Z2O安全攻防
289 0
n2t3mdveprf54
|
JavaScript 前端开发
html、body、document、window 的区别
html、body、document、window 的区别
n2t3mdveprf54
290 0
html、body、document、window 的区别
花花叔叔
获取body和html元素
获取body和html元素
花花叔叔
164 0
程序员大阳
JavaWeb学习之路(6)--了解HTML之body标签
本文目录 1. 题外话 2. 关于标签 3. 学习一个重要标签`` 4. ``作用 5. 小结
程序员大阳
274 0
morixinguan
|
Web App开发
HTML学习2---body常用属性以及文本修饰标记
上节 ，我们了解了网站制作相关的基础知识，也了解了制作网站需要用到的语言，以及一些简单的HTML的基础知识学习笔记： 博文链接如下：http://blog.csdn.net/morixinguan/article/details/76457441 这节，来写一下body常用属性以及文本修饰标记 的常用属性(1)bgColor : 网页的背景色。
morixinguan
1503 0
异步社区
|
Web App开发 JavaScript 前端开发
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.4　网页的主体标记body
异步社区
1542 0
西游不取经
|
Web App开发 前端开发 JavaScript
关于firefox的高度 html,body{ height:100%;}
今天 写js 时 要动态获取 window 的 高度，在ie 和 chrome 下都能获取   正确的高度 但firefox 就是要高出300 px 左右  先用的jquery 的 $(window).
西游不取经
1019 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
113 1
疯狂的猿
|
1天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
64 24
东方睿赢
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
61 7

热门文章

最新文章

  • 1
    Python 爬虫必备杀器，xpath 解析 HTML
  • 2
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 3
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 4
    HTML（HyperText Markup Language，超文本标记语言）
  • 5
    太便利了 ！通义灵码方便生成html页面
  • 6
    HTML5 新的 Input 类型2
  • 7
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
  • 8
    HTML5 元素2
  • 9
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 10
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    143
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    76
  • 3
    好看的html网站维护源码
    248
  • 4
    html+echars图表加日期检索
    62
  • 5
    html+echars的统计报表
    70
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    67
  • 7
    一种pug与html相互转换的工具
    107
  • 8
    android TextView HTML 的效果
    49
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    149
  • 10
    HTML5/CSS3粒子效果进度条代码
    75

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • CSS 快速掌握

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)