Question

我知道有很多次问过类似的问题，但我已经尝试了很多答案，似乎没有一个问题适用于我的情况。我找到了很多粘性页脚的解决方案，但这并不是我想要的，或者我可能还没弄清楚如何正确使用我的情况：< / p>

我有完全固定的位置导航（页眉/侧边栏/页脚）。内容流在页眉和页脚之上。
我的内容包装器层目前是100％宽度/ 100％最小高度在导航图层上方的图层，并使用顶部/底部的简单填充和左/右边距，我可以显示导航元素。
在包装层内，我有我的内容div，它有我的页面背景和框阴影。但我无法获得内容div 扩展到包装器的整个高度，因为包装器的高度是基于百分比。所以当我拥有时，一切都很完美填充或溢出窗口的内容，但是当我不这样做时，内容div太小。

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

如果没有使用javascript hack或calc（），是否有任何css解决方案？我愿意让页眉+页脚没有固定 - 但我想在内容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

A:A

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

1 个答案: