如何使用帶有頁腳的 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