带有条件固定位置底部导航栏的粘性页脚底部边距

Question

我有一个使用 flexbox 技术的粘性页脚，它工作得非常好，并在内容填满页面时展开。

我现在正在尝试根据特定用户添加一个有条件的固定位置底部导航栏。我已经将 margin-bottom 应用到页脚，当内容适合页面时这很好但是当内容增长时我无法将页面滚动到底部并查看完整的页脚。当内容增长到填满页面时，底部边距似乎没有应用于页脚。任何帮助将不胜感激，下面是示例代码和 Codepen。

<html>
<head>
<style>
    html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
footer {
    background: #42A5F5;
    color: white;
    margin-bottom: 25px;
    height: 50px;
}

.conditionalNav {
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background:green;   
    color: white;
    padding:5px;
    hight:25px;
}
</style>
<meta charset="UTF-8">
    <title>Sticky Footer with Flexbox</title> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 </head>
 <body>
 <div class="content">
   <h1>Sticky Footer with Flexbox</h1>
    <p><button id="add">Add Content</button></p>
    <p>some content</p></div>

   <footer class="footer">
       Footer 
   </footer>
   <div class="conditionalNav">
        Conditional bottom navbar
   </div>
</body>
</html>

https://codepen.io/pinman/pen/eYBLYOR

Answer 1

在 html 和 body 上设置 height: 100%（与最小高度相反）可防止文档高度超过视口高度，因此您的附加内容会溢出可滚动区域。

您可以~~从 100% 中删除正文，将其保留在 html 上，或者~~ 将 overflow: auto 添加到 html/body 规则中，以便body 元素可以滚动（而不是滚动 window）。

编辑：从正文中删除 100% 的高度允许页脚移出 window 的底部。相应更新。

html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
  overflow: auto;
}

您的 .conditionalNav 规则也有错别字：

hight:25px;

带有条件固定位置底部导航栏的粘性页脚底部边距

sticky footer bottom margin with conditional fixed position bottom nav bar

css

sticky-footer