包装高度溢出到页脚

Question

我想要一个粘性页脚，但我也希望我的主 div 在高度的页脚之前结束，但是如果您的边距为负并且我不知道为什么，包装器不会像往常一样向上移动。即使有最小高度，我也应该能够将其向上移动。当我增加负边距时，什么也没有发生。基本上我只需要我的包装器是 100% 的高度减去页脚的高度。感兴趣的 div 是具有蓝色背景的 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 vs margin-bottom

Answer 2

删除 min-height: 100%; 这将使其始终保持其父级的 100% 高度。在calc 函数中为您的数学添加一个空格并添加一个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 的操作数的引述：

注意：+ 和 - 运算符必须始终被空格包围。例如 calc(50% -8px) 的操作数将被解析为一个百分比后跟一个负长度，一个无效的表达式，而 calc(50% - 8px) 的操作数是一个百分比后跟一个减号和一个长度.更进一步， calc(8px + -50%) 被视为一个长度，后跟一个加号和一个负百分比。 * 和 / 运算符不需要空格，但为了保持一致性，允许并建议添加空格。

您可以了解有关 calc here 的更多信息。

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