Question

根据先前的问题及其缺乏答案，我不确定会有一个好的答案。幸运的是，我们只需要支持更新的浏览器。

寻找一个布局让我们拥有一个固定大小的页眉和页脚的3行，但是中心行与浏览器的高度不同，但是当内容太大时也会滚动。

没有JavaScript可能吗？我们尝试过（简化示例）：

<html style="height: 100%">
<body style="height: 100%">
<section style="height: 100%; display: table;">
  <header style="display: table-row; height: 200px;">
    Header
  </header>
  <section style="display: table-row; height: 100%; overflow-y: auto;">
    Content
  </section>
  <footer style="display: table-row; height: 200px;">
  </footer>
</section>
</body>
</html>

问题是当内容部分包含足够的内容以溢出它的高度时，而不是滚动内容而是延伸它。我曾希望浮动内容可能有所帮助，但也没有好处。

有什么想法吗？

Answer 1

首先，如果你想要固定的页眉和页脚，你需要一个绝对的（或固定的）引用来坚持：

.container {   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

然后，表达顶部/拉伸/底部约束的最简单，最现代的方法是沿着绝对参考的整个高度，在从上到下的流向上使用flex显示：

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

最后，定义您的flex内容及其对齐约束：

header {
   align-content: flex-start;
}
.fluid-and-scrollable {
    flex: 1;
    overflow-y: scroll;
}
footer {   
   align-content: flex-end;
}

（请注意，实际上并不需要flex-start和flex-end，因为HTML中元素的自然顺序意味着它们。）

当然，根据您的浏览器支持要求，您必须处理Flexible Box Layout的专有/旧语法。

查看演示here。

编辑：如果你想要在整个视口上应用这样的布局，我不推荐这个解决方案，因为如果不这样做，iOS将不会缩小浏览器栏数滚动body。相反，我会推荐一个更直接，更老式的解决方案，将固定的页眉和页脚放在body上（在移动版Safari上查看此alternative以检查差异）。

Answer 2

即使你只需要支持更新的浏览器，我认为有一个解决方案可以做所有浏览器（或至少大多数）。将其作为“页脚推送”解决方案。例如：

CSS：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

所以，现在页眉和页脚是一个设定的大小，中间（称为文章）将填满屏幕，除非有更多的内容，在这种情况下，它将拉伸。如果修改，请注意包装div的位置，它封装了标题和正文，但不包含页脚。

Answer 3

我知道这已经过时了，但我想我会再提出另一个建议。我对浏览器的看法是任何人都应该使用支持HTML5的浏览器。这肯定取决于网站的目的是什么，但这里是我使用的设置（也会给你滚动而不需要它）：

将Doctype设置为HTML（不添加所有额外的东西），将其归类为HTML5网站。

CSS：

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

body {
    font: 1em Verdana, Geneva, sans-serif;
}

header {
    width: 100%;
    height: 150px;
    background-color: gray;
}

section {
    min-height: 100%;
    padding-bottom: 100px;
}

footer {
    width: 100%;
    height: 100px;
    background-color: #E0E0E0;
    position: fixed;
    bottom: 0;
    left: 0;        
}

HTML：

<body>

<header>
    header
</header>

<section>
        <strong>repeat to fill the page when you test overflow</strong>
            content. test the content. test the content. test the content. test the content. test the content. test the content.
</section>

<footer>
    footer
</footer>

</body>

如果您需要检查内容区域，只需在*中添加一个颜色为绿色的边框属性 - 这是查看区域更改时的最佳位置。

如果有人不同意，请告诉我这有什么问题。我会根据需要随意启动和修改。

[P.S。用IE，Chrome和Mozilla测试 - 也...这将滚动页眉和内容，但不会滚动页脚。你总是可以使用与我用页脚做的标题相同的方法，但在与标题高度匹配的部分顶部添加填充]

3行布局，页眉和页脚固定高度和流体内容但滚动

3 个答案: