时间戳

首页 > 解决方案 > 如何拥有带有顶部和底部粘性导航栏的全屏 div

html - 如何拥有带有顶部和底部粘性导航栏的全屏 div

问题描述

我想要以下样式布局

+-----------------------------------------------------------+
| Top Sticky Nav                                            |
+--------------------------------------------------------+--+
|                                                        |S |
|                                                        |C |
| Div                                                    |R |
|                                                        |O |
|                                                        |L |
|                                                        |L |
+--------------------------------------------------------+--+
| Bottom Sticky Nav                                         |
+-----------------------------------------------------------+

我想使用贴在页面顶部和底部的 Bootstrap 4 导航栏。夹在中间的是一个带有我的内容的 div，如果 div 的内容大于两个导航之间的区域，它将自动显示一个滚动条。滚动条应该只显示在 div 上，并且不会被任何一个导航覆盖。

这对我来说似乎很简单，但我尝试过的每个解决方案在全屏、部分屏幕和移动尺寸之间移动时似乎都有点不稳定。

仅供参考，div 的内容将是一个 Bootstrap4 表单。

有没有人有类似的提示或例子？

我还应该提到，当导航栏在移动设备上被压缩并显示并打开汉堡包时，div 需要向下移动。

谢谢

标签： htmlcssbootstrap-4

解决方案

BS4 布局

<div class="fixed-top">
<!-- navbar or any thing you can add ad top div -->
<nav class="navbar navbar-fixed-top">

</nav>
</div>

<div class="container">
  class container or container-fluid or section ... what ever you want 
</div>

<div class="fixed-bottom">
<!-- navbar or any thing you can add ad bottom div -->
<nav class="navbar navbar-fixed-bottom">

</nav>
</div>

推荐阅读