主页 / 问题 / 622590
Accepted
ruslik
Asked:2020-02-02 21:40:19 +0000 UTC2020-02-02 21:40:19 +0000 UTC

从中获取 100% 的 css calc

  • 772

表达式中的 100% 来自哪里

height: calc(100%-65px);

从父母的高度？如果没有明确指定父母的身高？

css

1 个回答

  1. Best Answer

    首先，在 function 内部calc()，将给出类型 - from <percentage>to <length>，然后计算表达式。如果元素的属性值position不同于absolute并且父元素没有明确的高度，那么它将height继承该值auto并且函数的结果将为auto。

    如果一个元素position: absolute有 ，那么它的高度将是它最近的position: relative-parent 高度的 100% 减去 65 像素。

    如果没有找到最近的父position: relative级，则高度将从 height 计算body。

    .container {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.container-setheight {
  height: 200px;
}

.container-noheight {
  height: auto;
}

.container-abs {
  position: relative;
}

.container-abs-abs {
  
}

.first {
  height: 10px;
  background-color: aliceblue;
}

.second {
  height: calc(100% - 10px);
  background-color: yellow;
}

.container-abs .second,
.container-abs-abs .second {
  position: absolute;
}
    <div class="container container-setheight">
  Высота задана = 200 пикселей
  <div class="first"></div>
  <div class="second">calc(100% - 10px)</div>
</div>

<div class="container container-noheight">
  Высота не задана<br>
  position: static; + position: static;
  <div class="first"></div>
  <div class="second">calc(100% - 10px)</div>
</div>

<div class="container container-abs">
  Высота не задана<br>
  position: relative; + position: absolute;
  <div class="first"></div>
  <div class="second">calc(100% - 10px)</div>
</div>

<div class="container container-abs-abs">
  Высота не задана<br>
  position: static; + position: absolute;
  <div class="first"></div>
  <div class="second">calc(100% - 10px)</div>
</div>

    • 1

相关问题