关于css：div height calc（100％ – 50px）不起作用


div height calc(100% - 50px) not working

本问题已经有最佳答案，请猛点这里访问。

http：/ / / / / ebbgbn codepen.io joshuajazleung笔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <img src="https://placehold.it/300x200" alt="">
    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!
 


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

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

因为.inner顶位是移动到一个小空间，减少.outer服，我使用

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

但它不工作，想知道为什么吗？

相关讨论

1
2
3
4
5
.outer {
  background: red;
  position: relative;
  height: calc(100vh - 50px);
}

尝试改变100%=>100vh。

这不起作用，因为默认情况下，HTML和body元素不会跨越整个高度。然后你在里面设置了一个height: calc(100% - 50px);。为了简化它，只需设置height: 100%，您就会发现它并没有做您想要做的事情。

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

不太清楚您要做什么，但是如果使用包含百分比值的height设置，则该元素的父元素需要有一个定义的height定义，以便引用百分比值。在您的例子中，这是body，它的父元素也是html元素，因此您应该添加这个css:

1
2
3
html, body {
  height: 100%;
}

号

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