包装高度溢出到页脚

Question

我想要一个粘性页脚，但我也希望我的主要 div 在高度的页脚之前结束，但包装纸不会像通常那样向上移动，如果你有负边距，我不知道为什么。即使有最小高度，我也应该能够将它向上移动。当我增加负边距时，什么也没有发生。基本上我只需要我的包装是 100% 高度减去页脚的高度。感兴趣的 div 是蓝色背景的那个。现在我的侧边栏非常好（或者至少应该是），因为它在黑色页脚之前结束。

html {
    height: 100%;
}

body{
    height: 100%;
    margin:0;
    font-family: courier;
    font-size: 22px;
    color: white;
    background-color: #99ff33;
}


#wrapper{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    background-color: blue;
    min-height: 100%;
    height: calc(100vh-130px);
    margin-bottom: -130px;
}

#wrapper:after{
    content: "";
    display:block;
}

#footer, #wrapper:after{
    height: 130px;
}


.wrap {
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.sub {
    padding: 12px;
    width: 32%;
    height: 100px;
    color: white;
    border-right: solid white 1px;
}

.sub:last-child{
    border: 0px;
}

#sidebar{
    float:left;
    background-color: yellow;
    height:calc(100vh - 130px);
    width: 7.5%;
    border: 1px solid blue;
}

#footer {
    display: flex;
    height: 130px;
    width: 100%;
    background-color: black;
    clear: both;
}

<div id="sidebar"></div>
<div id="wrapper"></div>
<div id="footer">
   <div class="wrap">
      <div class="sub"></div>
      <div class="sub"></div>
      <div class="sub"></div>
   </div>
</div>

Answer 1

你搞错方向了，傻鹅！

#wrapper{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    background-color: blue;
    min-height: 100%;
    height: calc(100vh-130px);
    margin-top: -130px;

}

margin-top 对比 margin-bottom

Answer 2

删除 min-height: 100%; 这将使它始终成为其父项的 100% 高度。在 calc 函数中为你的数学添加一个 space 并添加一个 border 使其与你的工具栏大小相同。我还删除了 relative 位置。

这是 #wrapper 的新 css：

#wrapper{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid blue;
    width: 85%;
    background-color: blue;
    height: calc(100vh - 130px);
}

还有 jsfiddle.

更新：

这是来自 MDN 的关于用白色包围 calc 的操作数的引述space:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

您可以了解更多关于计算的信息 here。

此外，calc 没有得到高度支持，可能会发生变化。所以我不推荐使用它或者至少有一个后备。

包装高度溢出到页脚

Wrapper height overflowing into footer

html

css

wrapper