Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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不受高度支持，可能会发生变化。所以我不建议使用它或至少有后备。

包裹高度溢出到页脚

2 个答案: