html - 动态页眉、内容和页脚的经典布局

Question

我知道这个问题已被问过一千次，而且我已经研究了一段时间的各种方法。

基本上，我有一个页眉和一个高度未知的页脚，我需要内容来填充剩下的内容。我需要能够在内容中做我想做的事。

<header>Header</header>

<div class="content">
    <div class="table-cell">
        <div class="something">Something</div>
    </div>
</div>

<footer>Footer</footer>

http://jsfiddle.net/a3nvjqvg/

我以前用 display: table-row 做这件事，一切都很好，但现在我需要支持 IE10，在 IE10 中，我不能在内容中创建一个高度为 100% 的 div - 它不尊重它的父级出现高度和滚动条(在 IE10 中检查上面的 fiddle )。

所以现在我想，好吧，是时候尝试 flexboxes 了，因为它们现在得到了普遍支持。这是我的 fiddle :

<header>Header</header>

<div class="content">
    <div class="something">Something</div>
</div>

<footer>Footer</footer>

http://jsfiddle.net/waLwfthb/

使用适当的前缀，即使在 IE 中也能正常工作。但是在 Chrome 中我无法填满整个 flex 容器。

我不想做任何嵌套的 flex 或比这更复杂的事情，我只想要这个基本布局，这样我就可以开始在内容类中工作，就好像它是我的整个页面一样，而忘记页眉和页脚。在这个时代还那么难吗？我可能会遗漏一些非常简单的东西，希望有人能提供帮助。我认为这是 flex 的一种相当广泛的用法，但似乎大多数问题和答案都是关于更具体的情况。

Answer 1

您只需要从子 div 中删除 height: 100% 并在容器中添加 display: flex。

这在 Chrome 中对我有用:

html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

header {
    background: green;
}

.content {
    flex: 1;
    background: pink;
    display: flex;
}

.something {
    background: yellow;
    width: 100%;
}

footer {
    background: cornflowerblue;
}

<header>Header</header>
    
<div class="content">
  <div class="something">Something</div>
</div>

<footer>Footer</footer>