html - 如何创建具有绝对主体的绝对和相对页脚的导航栏

Question

到目前为止我已经有了这个，但是我如何确保我有一个带有相对页脚的绝对正文。

<nav class="navbar navbar-inverse navbar-fixed-bottom">
   <div class="container-fluid">
     <div class="navbar-header">

     </div>
   </div>
</nav>

Answer 1

用绝对和相对位置制作:

body {
  position: relative;
  height: 999px;
  padding: 0;
  margin: 0;
  background: #f0f0f0;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: gray;
}

'body' 是您的容器，'footer' 是您的导航栏。

My Fiddle