为什么你写的height:100%不起作用


Posted in HTML / CSS onMay 10, 2021

为什么你写的height:100%不起作用?

这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?

1.百分比宽高的设定

按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

为什么你写的height:100%不起作用

2.width:100%;

我们写下这样一段代码,随意设置一个背景色便于观察元素。注意以下代码,记得加上<!DOCTYPE html>,否则会有所不同。

<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//宽100%,我们现在看到的高是属于font-size的,而不是100%;

为什么你写的height:100%不起作用

<body>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    width:100%;height:200px;
    </div>
</body>
//效果如下

为什么你写的height:100%不起作用

可以看到基本上宽的100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?

3.浏览器是如何计算高度和宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:

<div style="height:100%;">height:100%;</div>

为什么你写的height:100%不起作用

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。
即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
各个浏览器对于宽高的解析也不相同,大家可以自己搜索一下。
 

4.如何解决

现在你知道了吧,%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height;
要特别注意的一点是,在<body>之中的元素的父元素并不仅仅只是<body>,还包括了<html>。
所以我们要同时设置这两者的height,只设置其中一个是不行的:

html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

为什么你写的height:100%不起作用

5.关于line-height居中的一点误解?

<!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>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            color: white;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;">height:100%;</div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

全部代码如上,可以看到设置了line-height为100%没有居中,这是为什么呢,因为这时候的%是相对于字体尺寸的?所以直接作用于没有绝对高度的元素是不行的。

为什么你写的height:100%不起作用

line-height属性说明:https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

这时候要想居中,可以如下,做一个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>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .div1 {
            background-color: blueviolet;
            position: relative;
        }

        .div2 {
            font-size: 30px;    
            color: white;
            text-align: center;                    
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%)  translateY(-50%);
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;" class="div1">
        <div class="div2">height:100%;</div>
    </div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

为什么你写的height:100%不起作用

6.源码

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

搬运链接:

(...) 前端小知识--为什么你写的height:100%不起作用?_知其所以然——前端 - SegmentFault 思否

到此这篇关于为什么你写的height:100%不起作用 的文章就介绍到这了,更多相关height:100%不起作用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
You might like
php使用ICQ网关发送手机短信
2013/10/30 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
js tab效果的实现代码
2009/12/26 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript作用域链实例详解
2019/01/21 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python 类的继承实例详解
2017/03/25 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python创建文件备份的脚本
2018/09/11 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
旅游与环境专业求职信
2014/06/05 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
导游词之千岛湖
2019/09/23 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis