固定覆盖与动态内容+滚动答案

【问题标题】：Fixed overlay with dynamic content + scrolling固定覆盖与动态内容+滚动
【发布时间】：2015-06-10 16:13:55
【问题描述】：

这就是我想要完成的：

一个固定的容器，位于页面的其余部分并带有边距。
Overlay 容器包含页眉、正文和页脚。
页眉和页脚粘在覆盖容器的顶部和底部。
正文具有动态内容，如果内容大于可用空间，则应该可以滚动。

如果页眉和页脚具有固定高度，这是一个完美的解决方案。您还可以找到解决方案here。

html,
body {
    width: 100%;
    height: 100%;
}

.overlay {
    position: fixed;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    background-color: #f00;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 30px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #0f0;
}

.header {
    line-height: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #00f;
}

.footer {
    line-height: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #00f;
}

<div class="overlay">
    <div class="container">
        <div class="header">
            Header
        </div>
        <div class="footer">
            Footer
        </div>
        <div class="inner">
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
        </div>
    </div>
</div>
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />

如果页眉和页脚不是固定的并且本身是动态内容，我该如何实现相同的结果？

我不是在寻找 Javascript 解决方案

【问题讨论】：

我不确定我的问题是否正确。你的意思是这样吗？ jsfiddle.net/3bz9trzq/2
感谢您的回复，但没有。页眉和页脚应该在覆盖容器中保持粘性。
你的意思是这样jsfiddle.net/m7jz8t0w
@jcuenod：您刚刚将 px 值替换为 % 值。这对我来说仍然是“固定”的。我正在寻找一种解决方案，其中页眉和页脚没有附加height 属性。
仍然不确定：这个？ jsfiddle.net/m7jz8t0w/1如果没有，请尝试用其他词问问题

标签： html css

【解决方案1】：

利用 FlexBox 模型的强大功能

html,
body {
    width: 100%;
    height: 100%;
}

.overlay {
    position: fixed;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    background-color: #f00;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.inner {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #0f0;
}

.header {
    line-height: 60px;
    background-color: #00f;
    flex-shrink: 0;
}

.footer {
    line-height: 30px;
    width: 100%;
    background-color: #00f;
    flex-shrink: 0;
}

<div class="overlay">
    <div class="container">
        <div class="header">
            Header
        </div>
        <div class="inner">
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
            Inner Content<br />
        </div>
        <div class="footer">
            Footer
        </div>
    </div>
</div>
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />
Page Page Page Page Page Page Page Page <br />

【讨论】：

只是想让 OP 知道 ie9 不支持此功能 caniuse.com/#search=flexbox
stackoverflow.com/questions/26490404/…
谢谢菲利普，我根本没有考虑弹性盒子。我不太关心