Question

https://codepen.io/joshuajazleung/pen/EbbgBN

<div class="outer">
  <div class="inner">
    <img src="https://placehold.it/300x200" alt="">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio animi harum impedit ex esse labore, placeat, tempore sapiente nisi cupiditate fugiat soluta ullam dicta ducimus accusamus tenetur consequuntur nesciunt earum!</div>
  </div>
</div>

.outer {
  background: red;
  position: relative;
  height: calc(100% - 60px);
}

.inner {
  position: relative;
  top: -100px;
}

因为.inner移动到顶部，减少.outer整体空间，我使用

height: calc(100% - 50px); // my logic is that it's div's height minus 50px

但它不起作用，想知道为什么？

Answer 1

.outer {
  background: red;
  position: relative;
  height: calc(100vh - 50px);
}

尝试更改100% =＆gt; 100vh

Answer 2

这不起作用，因为默认情况下html和body元素不会跨越整个高度。然后你在其中设置一个height: calc(100% - 50px);的内容...为了简化它，只需设置height: 100%，你就会注意到它没有做你想做的事。

您可以将正文和html的高度设置为100％，或者您可以尝试使用100vh而不是100％。

Answer 3

不太清楚您的目标是什么，但如果您使用包含百分比值的height设置，则该元素的父元素需要定义height按顺序定义有百分比金额的参考。在您的情况下，那是body，其父级也是html元素，因此您应该添加此CSS：

html, body {
  height: 100%;
}

https://codepen.io/anon/pen/XzzNbN

div height calc（100％ - 50px）不起作用

3 个答案: