css无效 https_无效的height100%？

之所以写 height，是因为它出现的场所比较多

body {
  height: 100%;
}

不知道你们有没有这样写过 css 属性，不过很遗憾这是无效的。

父级没有给定明确的高度么？ 这样说有一定正确性，不过不够全面，在 height 的规范中规定了两种情况 100%可以解析出来

1. 父级给定明确的高度

这个没什么好说的，平时我们也是这样写的 比如上面 body 没有生效就是因为没有指定 html 的高度，所以要这样写

html,
body {
  height: 100%;
}

1. 使用绝对定位元素

.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 世界》