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

Posted 2023-03-07

【中文标题】在包装器上使用填充时如何使内容 div 全高？

【英文标题】：How to make content div full height when using padding on wrapper?

【发布时间】：2015-11-20 23:10:11

【问题描述】：

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

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

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

在包装层内我有我的内容 div，其中有我的页面 背景和盒子阴影。但我无法获得内容 div 展开到包装器的整个高度，因为包装器高度 是基于百分比。所以当我有的时候一切都很完美 填充或溢出窗口的内容，但是当我不这样做时，内容 div 太小了。

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

是否有任何不使用 javascript hack 或 calc() 的 css 解决方案？ 我愿意不固定页眉 + 页脚 - 但我想在内容 div 上保留 box-shadow（即距离页面顶部和底部 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%;

【参考方案1】：

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

#page-layout 
  display: flex;

【讨论】：

这是有效的，似乎是要走的路。视口单位并没有完全做到这一点（页面总是在页脚上展开）。我可以使用 flexbox，然后旧的浏览器只会看到一个较小的内容 div，这对我来说没问题。感谢您的帮助！

【参考方案2】：

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

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

【讨论】：

它到达那里但将页面扩展到窗口之外。

@tyhenry 是的，它是视口高度的 100%，将其降低到 95 甚至更低。看看最适合你的。

【参考方案3】：

试试这个更新的小提琴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%;