关于html,body{height:100%}的理解

最新推荐文章于 2025-03-13 00:08:53 发布

前端图形

最新推荐文章于 2025-03-13 00:08:53 发布

阅读量5k

点赞数 11

分类专栏： css 文章标签： height:100%

本文链接：https://blog.csdn.net/suandfei/article/details/102766624

版权

本文探讨了CSS中html,body{height:100%}的使用，解释了为何需要同时设置这两个元素的高度，以确保内容能够填充整个浏览器窗口。内容指出，height:100%是相对于其包含块的高度，body的高度需要基于HTML标签的高度，而HTML的高度则是相对于浏览器窗口。若只设置body的高度，div等子元素仍无法继承有效高度，添加html的高度设置后问题得以解决。" 131702485,1212183,QT编程：文件操作指南,"['QT开发', '文件处理', 'GUI编程']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候你看到别人写css代码的时候会发现:html,body{height:100%}
首先我们先看下w3c 对于height的定义 :
在这里插入图片描述
首先这个height:可能为百分数就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div{
   
            height