CSS布局：页脚底部或页面末尾（如果向下）

Question

我知道，这类问题已被问到很多，但不知何故，正确的答案总是让我不知所措......

好的，我有两件事我想要的：

• 页面底部始终位于页面底部的页脚，无论内容的高度是否低于可用屏幕或更高。
• 页脚上方的内容应填充屏幕的其余部分 - 或者在需要时使用更多空间

第一部分非常简单，例如，就像这样......

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

没问题。但是，如何才能获得.footer元素上方的内容以填充剩余空间？ height=100%;显然不起作用;

任何人都知道如何用...实现布局

• 固定标题
• 屏幕底部的页脚（如果内容需要更高的高度，则位于下方）
• 如果需要，填充可用屏幕或使用更多内容的内容

（原因是，最后，我想要一个灵活高度的网格填充内容中的屏幕）

Answer 1

header {
    width: 100%;
    position: fixed;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    min-height: 5%;
}

    header :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

article {
    top: 55px;
    width: 100%;
    height: 90%;
    position: fixed;
}

footer {
    top: 95%;
    min-height: 5%;
    width: 100%;
    position: fixed;
    padding: 10px 15px;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-top: 1px solid #ddd;
}

<div>
  <header>HEADER</header>
  <article>CONTENT</article>
  <footer>FOOTER</footer>
</div>
 

随意使用此代码块。