无效的height100%?
之所以写 height,是因为它出现的场所比较多
body {
height: 100%;
}
不知道你们有没有这样写过 css 属性,不过很遗憾这是无效的。
父级没有给定明确的高度么? 这样说有一定正确性,不过不够全面,在 height 的规范中规定了两种情况 100%可以解析出来
- 父级给定明确的高度 这个没什么好说的,平时我们也是这样写的 比如上面 body 没有生效就是因为没有指定 html 的高度,所以要这样写
html,
body {
height: 100%;
}
- 使用绝对定位元素
.box {
position: relative;
.child {
position: absolute;
height: 100%;
widows: 100%;
}
}
这样就获取到了高度,不过注意绝对定位获取的高度与父级给定高度有一定区别
区别
css 是存在盒子模型的,平时高度和宽度都是作用在 content-box
上的,而上面说的第一种方式,高度获取到的就是父级 content 盒子的高度,怎么来证明呢? box-sizing
可以改变作用高度和宽度的盒子,我们来用这个实验。
<div class="box">
<div class="child"></div>
</div>
.box {
width: 180px;
background: #ddd;
height: 150px;
padding: 30px;
box-sizing: border-box;
.child {
height: 100%;
background: #666;
}
}
可以将上面代码复制到本地运行一下,可以看到子元素的高度并没有占用父元素的 100%。 改写一下,改成绝对定位来实现
.box {
width: 180px;
background: #ddd;
height: 150px;
padding: 30px;
box-sizing: border-box;
position: relative;
border: 20px solid;
.child {
height: 100%;
background: #666;
position: absolute;
width: 100%;
}
}
对比一下可以看到绝对定位的高度是包含 padding
区域的
最后以一个示例结尾
<div class="box">
<a href="javascript:" class="nav"></a>
<a href="javascript:" class="nav nav1"></a>
<img src="https://demo.cssworld.cn/images/common/l/1.jpg" alt="" />
</div>
.box {
display: inline-block;
position: relative;
.nav {
position: absolute;
height: 100%;
left: 0;
width: 50%;
opacity: 0.7;
background: #ddd;
}
.nav1 {
left: 50%;
background: #34538b;
}
}
借助绝对定位实现了高度自适应的效果
参考
《css 世界》