如何使用带有页脚的 CSS 制作粘性底部导航

Question

我正在尝试制作始终可见的底部导航栏。 它应该浮动到页面底部。 当您在页面底部时，我应该能够看到底部导航栏 + 页脚

我设法使用以下 HTML 和 CSS 使底部导航栏可见。

<html>
<head>
<style>
.stickyBottomNav {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<!-- Always visible Sticky Bottom Nav-->
<div class="stickyBottomNav">
  <p>Bottom Nav</p>
</div>

<!-- Only visible when your at the bottom of the page-->
<div class="footer">
  <p>footer</p>
</div>

</body>
</html>

当您位于页面底部时，我不确定如何使底部导航栏和页脚可见

Answer 1

你可以尝试这样的事情。 基本上使用position: absolute将页脚保持在内容的底部，而position: fixed将其保持在屏幕底部，主体为position: relative 。 然后你所要做的就是一点间距。

 html, body { /* When there is not enough content */ min-height: calc(100vh - 100px); margin: 0px } body { position: relative; /* Sum of heights for footer and nav */ padding-bottom: 100px; } h2 { /* Keep it from pushing the body down */ margin-top: 0px; padding-top: 16px; }.footer { position: absolute; /* Place above nav */ bottom: 50px; left: 0px; height: 50px; width: 100%; background-color: blue; color: white; text-align: center; }.stickyBottomNav { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 5; background-color: red; color: white; text-align: center; }

 <body> <h2>Fixed/Sticky Footer Example</h2> <h4>Lots of content</h4> <p>Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Egestas tellus rutrum tellus pellentesque eu. Consequat mauris nunc congue nisi vitae suscipit. Est placerat in egestas erat imperdiet sed euismod nisi. Euismod quis viverra nibh cras. Sed vulputate odio ut enim blandit volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Enim facilisis gravida neque convallis a cras semper. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Erat imperdiet sed euismod nisi porta lorem. Quam id leo in vitae turpis. Nec nam aliquam sem et tortor consequat id. At urna condimentum mattis pellentesque id nibh tortor id aliquet. </p> <h3>End of content</h3> <!-- Always visible Sticky Bottom Nav--> <div class="stickyBottomNav"> <p>Bottom Nav</p> </div> <!-- Only visible when your at the bottom of the page--> <div class="footer"> <p>footer</p> </div> </body>

Answer 2

下面是使您的导航贴在底部的布局示例。 建议您以全屏模式查看，否则部分示例将被框架挡住。

这个概念是：

制作html和body全高和全宽。
将您的nav放在main下方并使main扩展并填充屏幕的 rest。
维护您的main可滚动内容，因此其中的所有内容和页脚都不会影响nav 。

 html { height: 100%; margin: 0; width: 100%; } body { height: 500px; margin: 0 auto; overflow: hidden; width: 340px; } main { background-color: #999; height: calc(100% - 50px); overflow-y: auto; }.container { background-color: #fff; min-height: calc(100% - 100px); } footer { background-color: #f0891a; color: #fff; height: 100px; } nav { background-color: #333; box-shadow: 0 -5px 10px 0 rgba(0,0,0,.1); color: #fff; height: 50px; }

 <body> <main> <div class="container"> <ul> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> <li>sample list</li> </ul> </div> <footer> Footer here </footer> </main> <nav>bottom nav here</nav> </body>

如何使用带有页脚的 CSS 制作粘性底部导航

问题描述

2 个解决方案

解决方案1
0 2021-01-14 00:40:47

解决方案2
0 2021-01-14 00:47:58

如何使用带有页脚的 CSS 制作粘性底部导航

问题描述

2 个解决方案

解决方案1 0 2021-01-14 00:40:47

解决方案2 0 2021-01-14 00:47:58

解决方案1
0 2021-01-14 00:40:47

解决方案2
0 2021-01-14 00:47:58