为什么你写的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 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 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实现的css文件背景图片下载器代码
2014/11/11 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
javascript 必知必会之closure
2009/09/21 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS实现分页导航效果
2020/02/19 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python列表操作方法详解
2020/02/09 Python
文职个人求职信范文
2013/09/23 职场文书
行政专员求职信范文
2014/05/03 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
领导干部考核评语
2015/01/04 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
优秀大学生申请书
2019/06/24 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android