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

使用position: fixed;，bottom:0px; 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 2

我想在css

import requests
from bs4 import BeautifulSoup  
import re
import csv

url = 'http://loterias.caixa.gov.br/wps/portal/loterias/landing/duplasena/'

r = requests.get(url)

soup = BeautifulSoup(r.text, "lxml")  ## "lxml" to avoid the warning

pat = re.compile(r'(?i)(?<=concurso)\s*(?P<concurso>\d+)\s*\((?P<data>.+?)(?=\))')
concurso_e_data = soup.find(id='resultados').h2.span.text
match = pat.search(concurso_e_data)

if match:  
    concurso, data = match.groups()
    nums = soup.find_all("ul", {"class": "numbers dupla-sena"})
    num_headers = (','.join(['numero%d']*6) % tuple(range(1,7))).split(',')
    field_names = ['sena', 'data', *num_headers]

    rows = []
    for group in nums:
        row = [concurso, data]
        for num in group.findAll('li'):
            row.append(int(num.text))
        row_title_value_pairs = zip(field_names, row)
        row_dict = dict(row_title_value_pairs)
        rows.append(row_dict)

    with open('ds_v10.csv', 'w', encoding='utf-8') as csvfile:
        csv_writer = csv.DictWriter(
        csvfile,
        fieldnames=field_names,             
        dialect='excel',       
            delimiter = ';',  #to handle column issue in excel!
        )
        csv_writer.writeheader()
        csv_writer.writerow(rows[0])
        csv_writer.writerow(rows[1])

可能有效

Answer 3

这是Thee CSS Rules

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