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

Question

I'm trying to make bottom navbar that is always visible.我正在尝试制作始终可见的底部导航栏。 It should be floating to the bottom of the page.它应该浮动到页面底部。 When you at the bottom of the page I should be able to see the bottom nav bar + the footer当您在页面底部时，我应该能够看到底部导航栏 + 页脚

Ive managed to make the bottom navbar visible using the following HTML and CSS.我设法使用以下 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>

I'm not sure how to make the bottom navbar and footer visible when your at the bottom of the page当您位于页面底部时，我不确定如何使底部导航栏和页脚可见

Answer 1

You can try something like this.你可以尝试这样的事情。 Basically use position: absolute to keep the footer at the bottom of the content, and position: fixed to keep it at the bottom of the screen with the body as position: relative .基本上使用position: absolute将页脚保持在内容的底部，而position: fixed将其保持在屏幕底部，主体为position: relative 。 Then all you have to do is a bit of spacing.然后你所要做的就是一点间距。

 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

Below is an example of the layout that makes your nav sticks to the bottom.下面是使您的导航贴在底部的布局示例。 Suggest you to view it in full screen mode otherwise part of the example will be blocked by the frame.建议您以全屏模式查看，否则部分示例将被框架挡住。

The concept is:这个概念是：

Make the html and body full height and full width.制作html和body全高和全宽。
Put your nav below main and make the main to expand and fill the rest of the screen.将您的nav放在main下方并使main扩展并填充屏幕的 rest。
Main your main scrollable so all contents and footer inside it will not affect the nav .维护您的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