Question

我想要以下样式布局

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

我想使用固定在页面顶部和底部的Bootstrap 4导航栏。夹在中间的是具有我的内容的div，如果div的内容大于两个Nav之间的区域，它将自动显示滚动条。滚动条应仅显示在div上，而不能被任一导航器覆盖。

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

仅供参考，div的内容将为Bootstrap4表单。

有人有类似的提示或示例吗？

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

谢谢

Answer 1

在Bootstrap 4中，您有一些position classes，例如.fixed-top，这会将视口边缘顶部的元素设置为edge，而.fixed-bottom的作用相同，但在底部。

您的代码应如下所示：

.red {
  background-color: red;
  height: 40px;
}
.blue {
  background-color: Aqua;
}

.container {
  margin-top: 40px;
  margin-bottom: 40px;
}

<div class="fixed-top red">Fixed top</div>
</div>
<div class="container">
  <div class="row">
    
    <div class="col-12 blue">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a</div>

  </div>
</div>

<div class="fixed-bottom red">Bottom</div>

如您所见，我为顶部固定元素添加了高度，因为我们需要在容器上添加与顶部高度相同的像素数量的边距，因此内容不会从顶部元素下方开始带有底部元素，但使用margin-top代替margin-bottom。

我为您创建了一个Codepen。

Answer 2

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>

如何使全屏div带有顶部和底部粘性导航栏

2 个答案: