使用calc函数的min-height不起作用

Question

4

我有一个Bootstrap面板在这里，我想设置panel-body类的min-height属性为：

.panel-body {
      min-height: calc(100% - 100px);
    }

为什么在给出的 fiddle 中它不起作用？calc 函数是否与浏览器相关？

- mpsbhat

2

高度是100％的什么？ - Paran0a

请查看此链接：https://css-tricks.com/a-couple-of-use-cases-for-calc/ - Lahar Shah

@Paran0a 高度为身体高度的100%。 - mpsbhat

@Paran0a 请看我的回答，了解为什么height: 100%并不是你想象中的意思。它表示其直接父元素的100％。如果直接父元素没有指定任何高度，则子元素无法成为其父元素的100％，因为其父元素的高度由子元素内容确定。 - Matt Fellows

抱歉，上一条评论不应该针对你@Paran0a，而是针对mpsbhat。 - Matt Fellows

2个回答

2

.container没有设置高度，因此它的高度将与其子元素一样高，子元素尝试着达到100%的高度。看到问题了吗？让.container拥有100％的高度（以及它的所有父元素），你应该会看到一些成功？

请查看我修改后的代码：Fixed Fiddle

- Matt Fellows

1

@mpsbhat 我猜你的意思是fiddle不能工作，而不是我描述的方法有问题？那只是因为链接错误 - 我现在已经修复了链接... - Matt Fellows

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hazalg · Accepted Answer

请查看CSS Tricks的文章。

在该文章中，你可以了解5种设置粘性页脚的方法。

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

<body>
  <div class="content">
    content
  </div>
  <footer class="footer">sticky footer</footer>
</body>