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

Question

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

我有完全固定的位置导航 (header/sidebars/footer)。内容在页眉和页脚之上流动。
我的内容包装层目前是 100% 宽度/ 100% 最小高度导航层上方的图层，并在 top/bottom 上使用简单的填充，在 left/right 上使用边距，我能够显示导航元素。
在包装层里面我有我的内容div，里面有我的页面背景和一个盒子阴影。但是我无法获取内容 div 到扩展到包装纸的全高，因为包装纸高度是基于百分比。所以当我有填充或溢出 window 的内容，但当我不这样做时，内容 div 太小了。

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

是否有任何 css 解决方案而不使用 javascript hack 或 calc()？我愿意让页眉 + 页脚不固定 - 但我想在内容 div 上保留框阴影（即距页面顶部和底部 50px）。

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

给这个你想要的结果？ can i use viewport units

add:
    .page {
        min-height: 100vh; /*min-height not height :)*/
    }

Answer 2

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

#page-layout {
  display: flex;
}

Answer 3

试试这个更新后的 fiddle https://jsfiddle.net/n9rpbj3m/6/

#page-layer{

position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}

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

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

How to make content div full height when using padding on wrapper?

html

css

sticky-footer