html - 在包装器上使用填充时如何使内容 div 全高？

Question

我知道类似的问题已经被问过很多次，但我尝试了很多答案，但似乎没有一个适合我的情况。我找到了很多针对粘性页脚的解决方案，但这并不是我想要的，或者我还没有想出如何根据我的情况正确使用:

• 我有完全固定的位置导航(页眉/侧边栏/页脚)。内容在页眉和页脚之上流动。

• 我的内容包装层目前是 100% 宽度/100% 最小高度导航层上方的层，并在顶部/底部使用简单的填充，在左侧/右侧使用边距，我能够显示导航元素。

• 在包装层内我有我的内容 div，它有我的页面背景和一个盒子阴影。但是我无法将内容 div 到扩展到 wrapper 的全高，因为 wrapper 高度是基于百分比。所以当我有填充或溢出窗口的内容，但当我不这样做时，内容 div 太小。

粘性页脚在这种情况下不起作用，因为粘性页脚只是覆盖了内容(内容本身仍然是 100% 高度)。我基本上希望内容的最小高度为 100% - 减去 50px 页眉和 50px 页脚。

有没有不使用 javascript hack 或 calc() 的 css 解决方案？我愿意让页眉和页脚不固定 - 但我想将框阴影保留在内容 div 上(即距页面顶部和底部 50 像素)。

JSFiddle: https://jsfiddle.net/tyhenry/n9rpbj3m/5/

HTML:

<div id="nav">
    <div id="header">
        header
    </div>
    <div id="left-side">
        left sidebar
    </div>
    <div id="right-side">
        right sidebar
    </div>
    <div id="footer">
        footer
    </div>
</div>
<div id="page-layer">

    <div class="page">
        content<br>
        content<br>
        content<br>
    </div>
</div>

CSS:

* {
    box-sizing: border-box;
}

html, body{
    background-color: #eeffff;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
}

#header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 50px;
    background-color: #ddd;
}

#left-side {
    background-color: #bbb;
    position: fixed;
    left: 0;
    top: 50px;
    width: 50px;
    height: 100%;
}

#right-side {
    background-color: #bbb;
    position: fixed;
    right: 0;
    top: 50px;
    width: 50px;
    height: 100%;
    overflow: hidden;
}

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

#page-layer{
    position:relative;
    padding: 50px 0 50px 0;
    margin: 0 50px 0 50px;
    min-height: 100%;
}

.page {
    background-color: #fff;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8);
    width:100%;
}

Answer 1

如果您将显示属性更改为 flex，它会填充整个(页眉和页脚之间的高度)并在您调整大小时进行调整。

#page-layout {
  display: flex;
}