修复了动态内容+滚动的叠加层

时间：2015-06-10 07:51:17

标签： html css

这就是我想要实现的目标：

  1. 一个固定的容器，用于保留页面的其余部分。
  2. 叠加容器包含页眉，正文和页脚。
  3. 页眉和页脚在叠加容器的顶部和底部是粘性的。
  4. Body具有动态内容，如果内容大于可用空间，则应该是可滚动的。

    5. 如果页眉和页脚具有固定高度，这是一个完美的解决方案。您还可以找到解决方案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解决方案

1 个答案:

答案 0 :(得分：2)

使用FlexBox模型的强大功能

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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 />
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题