Html CSS 强制始终位于最低部分

Question

我有以下html + css：

<!-- Here starts the header-->
<nav class="navbar navbar-inverse navbar-fixed-top  ">
<div class="navbar-header">
  <a class="navbar-brand" href="/"> MEGA SERIES</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="/">Series</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a class="right-margin" href="/"></span> Iniciar sesion</a></li>
</ul>
<form class="navbar-form navbar-right" action="{% url 'series:search' %}" method="post">
  <div class="input-group">
    <input type="text" name="search_text" class="form-control" placeholder="Nombre de la serie">
      <div class="input-group-btn">
        <button class="btn btn-primary" type="submit">
          <i class="glyphicon glyphicon-search"></i> Buscar
        </button>
      </div>
    </div>
</form>

  <!-- Page Content -->
  <div class="container">
  <div class="row">
      <div class="col-md-3">
          <p class="lead">Buscar por categorías</p>
          <div class="list-group">
            <a class="list-group-item" <%= link_to "Comedia", category_path("Comedia") %></a>
            <a class="list-group-item" <%= link_to "Aventura", category_path("Aventura") %></a>
            <a class="list-group-item" <%= link_to "Drama", category_path("Drama") %></a>
            <a class="list-group-item" <%= link_to "Fantastico", category_path("Fantastico") %></a>
          </div>
      </div>

      <div class="col-md-9">
        <% if flash[:from_add_product] %>
          <div class="alert alert-success">
            <strong>Se ha añadido al carrito correctamente!</strong>
          </div>
        <% end %>
          <div class="row">
              <% @series.each do |serie| %>
                <div class="col-sm-4 col-lg-4 col-md-4">
                    <div class="thumbnail">
                        <img src=<%= serie.image %> alt="" style="height: 290px; width: 240px">
                        <div class="caption">
                            <h4 class="pull-right price"><%= (serie.chapters.size * serie.chapters[0].price * 0.8).round(2)%> €</h4>
                            <h4> <%= link_to serie.title, season_path(serie) %> </h4>
                            <%=serie.plot%></p>
                        </div>
                        <div class="ratings">
                            <br />
                            <p class="pull-right">Lanzamiento: <%= serie.release_year%></p>
                            <br />
                        </div>
                        <div class="buy">
                          <td><%= link_to "Comprar Serie", {:controller => "payments", :action => :addproduct, :item => serie}, {:method => :post, :class=>"btn btn-success"} %></td>
                        </div>
                    </div>
                </div>
              <% end %>
          </div>
      </div>
  </div>

<!-- Here starts page footer-->
<footer class="navbar-bottom">
   <p> Copyright © 2017 Mega Series España </a> </p>
</footer>

</html>


.navbar-bottom{
   position: absolute;
   width: 100%;
   padding-top: 1%;
   padding-bottom: 0.5%;
   text-align: center;
   background-color: #2f2f2f;
   color: #ffffff;
 }

如果页面有足够的内容，它会显示如下：

没关系，在最下面，下面没有空白。

但是如果页面没有足够的内容，那就是它的外观：

页脚下方有空格。我能做些什么来强制它始终处于最低部分？

Answer 1

我在 css 中思考

  bottom:0

可能有用

Answer 2

使用position: fixed;,bottom:0px; insted of position: absolute; 它将始终将页脚设置在底部位置。滚动时不要移动它。

.navbar-bottom{
    position: fixed;
     bottom:0px;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 0.5%;
    text-align: center;
    background-color: #2f2f2f;
    color: #ffffff;
 }

 .navbar-bottom{
   position: fixed;
   width: 100%;
   padding-top: 1%;
   padding-bottom: 0.5%;
   text-align: center;
   background-color: #2f2f2f;
   color: #ffffff;
   bottom:0px;
 }

  <footer class="navbar-bottom">
    <p> Copyright © 2017 Mega Series España </a> </p>
  </footer>

Answer 3

这是你的 CSS 规则

.footer {
       position: absolute;
       bottom: 0;
       width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      background-color: #f5f5f5;
 }