Question

我不知道那个空间是怎么来的。我不想要固定页脚但只想要固定的导航栏。我的导航栏工作正常，但页脚下面有一些空白区域。

body {
  padding-top: 4.5rem;
    min-height:100%;
}
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
    left: 0;
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #000000;
}

这是页脚的CSS。我正在使用Bootstrap 4。

<body>
    <div class="container-fluid">
        <nav ..... #code for navbar
        </nav>          
    <div class="row justify-content-center">
        <div class="col-6">
           <div class="card">
       ~~~~MY CONTENT~~~
           </div>
         </div>
     </div>
     <div class="row">
        <footer class="footer">
          <div class="container">
            <span class="text-muted">Place sticky footer content here.</span>
          </div>
        </footer></div>
        </div>
    </div>

但是，当我将CSS更改为position：fixed时。它工作正常，但我不希望这样。提前谢谢。

Answer 1

您的内容元素的高度不是屏幕的高度。因此，您的页脚将是这样的，您可以使用JavaScript或仅将内容放入容器中。

引导程序中的页脚下方有空格？

1 个答案: