实现最外层盒子高度100%

最新推荐文章于 2023-07-27 11:44:44 发布

安和同学

最新推荐文章于 2023-07-27 11:44:44 发布

阅读量1.8k

点赞数 2

分类专栏：前端设计技巧文章标签： height全屏显示高度100%

本文链接：https://blog.csdn.net/amdd9582/article/details/87744782

版权

前端设计技巧专栏收录该内容

11 篇文章 0 订阅

订阅专栏

很多人都知道

width属性可以继承100%，不设置绝对宽度就可以占满整个浏览器；

但是height设置100%无法占满整个浏览器高度；

原因：最外层的盒子需要继承父级元素的width和height，

它的父级为html和body，并不是其中一个，

html和body的width为100%，但是height默认为auto，

所以要同时给html和body设置高度为100%

这样设置之后，最外层的盒子出现了宽高都为百分之百的效果，

但是高度上会溢出，出现滚动条，

原因：body的margin默认有值，

边距加上百分之百的内容会超出可视范围，

所以会出现滚定条，

直接把body中的margin值设为0，滚动条消失

下面源码拉走看效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>full screen</title>
</head>
<style>
    /*html、body同为div的父级，但是html和body高度默认值为auto，所以div继承高度为0*/
    html, body {
        height: 100%;
    }
    /*body默认存在margin值，所以边距加内容部分超出百分之百会溢出，出现滚动条，清除margin就OK*/
    body {
        margin: 0;
    }
    div {
        height: 100%;
        background: #009678;
    }
</style>
<body>
    <div></div>
</body>
</html>

安和同学

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现最外层盒子高度100%

很多人都知道width属性可以继承100%，不设置绝对宽度就可以占满整个浏览器；但是height设置100%无法占满整个浏览器高度；原因：最外层的盒子需要继承父级元素的width和height，它的父级为html和body，并不是其中一个， html和body的width为100%，但是height默认为auto， ...
复制链接

扫一扫