文档章节

div设置height:100%;无效的原因

放开那个女孩
 放开那个女孩
发布于 2017/10/18 17:55
字数 470
阅读 202
收藏 0

有时我们会困惑为什么设置div的height:100%;没有效果,如下所示:

要解决这个问题,先的知道设置height:100%的原理,当你让一个元素的高度设置为百分比高度时,是相对于父元素的高度根据百分比来计算高度。 所以当父元素没有高度时,height:100%也就没有高度值,所以我们来设置body高度。

可见还是没有效果,原因跟上一个一样,其父元素也没有高度,所以我们来设置html的高度。

可见产生了我们想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试height100%</title>
</head>
<style>
   *{
      padding: 0;
      margin: 0;
   }
   html{
      height: 100%;
   }
   body{
      height: 100%;
   }
   .wqh{
      height: 100%;
      background-color: royalblue;
   }
</style>
<body>
<div class="wqh"></div>
</body>
</html>

 

进阶

html 的父元素可以理解成window,浏览器会将html填充完一个浏览器窗口。

设置html的height为具体的像素值,当其值大于浏览器窗口时,浏览器出现滚动条,当其值小于浏览器窗口时,同样会将html填充完整个浏览器窗口(可以设置背景测试)。

设置html的height为百分比时,当其值大于100%出现滚动条,当小于100%时同样会将html填充完整个浏览器窗口(可以设置背景测试)。

但是子html的子元素的高度设置成百分比时,会按照html设置的高度值计算比例。(如下所示,html高度为1000px;所以body的高度为500px)。

 

对于body的设置的高度小于浏览器窗口时,同样会填充满整个浏览器窗口(可以设置背景测试),但是其子元素的高度设置成百分比时,会按照body设置的高度值来计算比例。

© 著作权归作者所有

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
初始化页面body为空的问题。

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我...

marjey
2016/12/15
2
0
CSS中height 100%高度无效的原理解析

我们在body中定义一个div设置 width:100%;height:100%;background-color: #666666;用F12查看,发现div并没有铺满全屏,那么我们来解析下原因: 在css中因为父元素没高度,父元素的父元素也没...

开源中国最牛的人
2018/12/02
0
0
最近总结的11条兼容浏览器问题

1 padding-top 高度计算方式不同 IE不加高度,Firefox等加高度 解决方案: height:345px; //此行为firefox可识别高度。 *height:427px //为IE可识别高度。 2 Div text-align:center 在firef...

湖小叶叶
2014/03/07
0
0
position:relative和absolute以及css height

position属性 <无论怎样设置 始终文字框都无法紧贴浏览器边框……剩下的缝隙简直诱发强迫症 body { overflow: hidden;} .container{position:relative; z-index:998; padding:2rem;top: 0px...

phala
2015/07/31
0
0
IE8 下min-width遇到的一个情况

本人小白,在WIN7 64位 IE8下 运行自己写的一个HTML页面,给HTML,BODY设置了min-width,min-height属性 我为了对齐,所以在TABLE中写了SELECT标签以及Input,button标签,当打开页面后 点击标签...

int80h
2018/07/23
137
0

没有更多内容

加载失败,请刷新页面

加载更多

idea下springboot 项目在static目录下添加文件不生效

idea下springboot 项目在static目录下添加文件不生效 问题描述 是这样子的,我的项目目录结构如下: 我在static目录下,创建了index.html和aaaa.jpg这两个文件。然后,启动服务访问 http://l...

wotrd
昨天
5
0
k8s1.14 一、环境

1. 4台虚拟机 (CentOS Linux release 7.2.1511 (Core) ) 192.168.130.211 master 192.168.130.212 node1 192.168.130.213 node2 192.168.130.214 node3 2. 设置服务器hostname 2.1 设置本机......

ThomasCheng
昨天
4
0
盖茨:如果我现在开创一家公司 将会专注于AI

新浪科技讯,北京时间 6 月 26 日凌晨消息,微软联合创始人比尔·盖茨(Bill Gates)在周一接受采访时表示,如果他今天从哈佛大学辍学并开创一家新公司,那么这家公司将会专注于人工智能(A...

linuxCool
昨天
1
0
聊聊feign的Retryer

序 本文主要研究一下feign的Retryer Retryer feign-core-10.2.3-sources.jar!/feign/Retryer.java public interface Retryer extends Cloneable { /** * if retry is permitted, retur......

go4it
昨天
12
0
HyperLogLog简介

  (1)HyperLogLog简介      在Redis 在 2.8.9 版本才添加了 HyperLogLog,HyperLogLog算法是用于基数统计的算法,每个 HyperLogLog 键只需要花费 12 KB 内存,就可以计算接近 2^64 个...

SEOwhywhy
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部