无法使用 calc 调整轮播中的图像大小
Unable to use calc to size image in carousel
我希望这是一个我忽略的简单答案。我一直在玩弄 ui-bootstrap 轮播指令，并希望动态调整它的大小以填充页眉和页脚之间的 space。
我的页眉和页脚均为 div，高度为 70 像素。当我让它做自己的事情时，旋转木马工作得很好，只需插入图像即可。但是图像相当大，而且大小不尽相同。我想这可能是 img 标签的问题，所以我将其更改为 div 并将图像设置为每个图像的背景，高度设置为 calc(100% - 70px - 70px)。然而，div 似乎从未真正获得计算出的高度（它们的高度始终为 0）。
在网上搜索后，我已经将 html 和 body 标签设置为 height: 100%，所以这不是问题。
比较难解释，请参考
this plunkr
高度给定百分比仅在父元素也有明确的高度设置时才有效——你在这里没有，所以它不能工作，无论是在 calc() 中使用还是作为 [=11] =]直接。
但是您当然可以使用 calc(100vh - 140px)，前提是您可以使用 limited support in older browsers¹。 100vh 是视口高度的 100%，但不需要在 html 元素之前的所有父元素上设置高度（因为 height:100% 需要实现相同的高度东西）。
¹ 请注意，caniuse 的已知问题提到 “Safari 和 iOS Safari（6 和 7）不支持 calc() 中的视口单位 [...]。” 根据您是否需要这些，这可能会破坏交易。在这种情况下，您可能会尝试为轮播容器使用绝对（或固定）定位（top 和 bottom 各 70 像素）。这样，它将再次具有定义的高度，子元素的 100% 应该可以工作。
我希望这是一个我忽略的简单答案。我一直在玩弄 ui-bootstrap 轮播指令，并希望动态调整它的大小以填充页眉和页脚之间的 space。
我的页眉和页脚均为 div，高度为 70 像素。当我让它做自己的事情时，旋转木马工作得很好，只需插入图像即可。但是图像相当大，而且大小不尽相同。我想这可能是 img 标签的问题，所以我将其更改为 div 并将图像设置为每个图像的背景，高度设置为 calc(100% - 70px - 70px)。然而，div 似乎从未真正获得计算出的高度（它们的高度始终为 0）。
在网上搜索后，我已经将 html 和 body 标签设置为 height: 100%，所以这不是问题。
比较难解释，请参考 this plunkr
高度给定百分比仅在父元素也有明确的高度设置时才有效——你在这里没有，所以它不能工作，无论是在 calc() 中使用还是作为 [=11] =]直接。
但是您当然可以使用 calc(100vh - 140px)，前提是您可以使用 limited support in older browsers¹。 100vh 是视口高度的 100%，但不需要在 html 元素之前的所有父元素上设置高度（因为 height:100% 需要实现相同的高度东西）。
¹ 请注意，caniuse 的已知问题提到 “Safari 和 iOS Safari（6 和 7）不支持 calc() 中的视口单位 [...]。” 根据您是否需要这些，这可能会破坏交易。在这种情况下，您可能会尝试为轮播容器使用绝对（或固定）定位（top 和 bottom 各 70 像素）。这样，它将再次具有定义的高度，子元素的 100% 应该可以工作。