如何根据屏幕高度减去绝对定位元素的高度来设置div高度？

Question

我有一个高度为100vh的面板，因此100％的屏幕（但高度：100％因某些原因不起作用）。

此面板必须显示包含其内容和页脚的div。

页脚通常显示在该面板下，但在首页中它必须位于其中，所以我必须禁用正常页脚并在面板内调用它。 因此，它必须具有位置：绝对和底部：0。

现在问题是页脚有自己的高度（在调整窗口宽度时会稍微改变一点），而面板中的另一个div必须占用所有剩余高度。

那么，有没有办法动态设置div的高度，而不是用页脚高度变化的每个窗口宽度的媒体查询填充CSS，将其设置为高度：calc（100vh） - [页脚高度]）？

Answer 1

首先，如果没有为父元素设置高度，则在子元素上设置高度百分比将不起作用。您的父元素的高度应设置为100％（包括html和body元素）。

其次，如果您的浏览器支持是IE10 +，我建议使用flexboxes。 这是你如何做到的（没有浏览器前缀）：

.parent-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

这会将父容器设置为flexbox并将其方向更改为“column”（因此其子容器会在另一个容器下堆叠）。

.expanding-child {
    height: 100%;
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
}

这是您内容的包装器。它将尽可能地扩展，牢记你的页脚高度。

.sticky-child {
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
}

这是您的页脚，现在始终位于底部，固定，不会重叠可滚动内容。

以下是HTML的外观：

<div class="parent-container">
    <div class="expanding-child">
    </div>

    <div class="sticky-child">
    </div>
</div>

我做了一个快速的小提示来展示它here

仅当您在所有父元素上将高度设置为100％时，此操作才会正常工作。

编辑：here是了解有关flexbox的更多信息的好资料，我建议您进行调查。 here是我第一次使用flexbox时使用的。{/ p>

Answer 2

我认为你在询问粘性页脚。我希望它会对你有所帮助。始终使用FlexBox将页脚固定在底部 Fiddle