Html CSS force to be always in the lowest part

Question

I have the following 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;
 }

If the page has enough content it shows like this:

It is ok, it's in the lowest part and there isn't white space below.

But if the page doesn't have enough content that's how it looks:

There's white space below footer. What I can do to force it to be always in the lowest part?

Post your complete html and css please. There are a few ways of doing it, but it depends on the rest of your markup. — Michael Coker, May 22 '17 at 17:38
Possible duplicate of [Footer at bottom of browser except when I scroll](https://stackoverflow.com/questions/9812551/footer-at-bottom-of-browser-except-when-i-scroll) — Rob, May 22 '17 at 17:39
can you post rest of your code to solve your problem effectively — komal, May 22 '17 at 17:46

XYZ · Answer 1 · 2017-05-22T17:34:59.357

0

Use position: fixed;,bottom:0px; insted of position: absolute; It will always set the footer at bottom position.and don't move it when scrolled.

.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>

edited May 22 '17 at 17:34

answered May 22 '17 at 17:30

XYZ

4,450
2
15
31

Same behaviour with fixed – Lechucico May 22 '17 at 17:32
and bottom:0px; – XYZ May 22 '17 at 17:32
Still the same! It just places below series but not in the lowest part. – Lechucico May 22 '17 at 17:34
position:fixed,bottom:0px; will make it stay at bottom of the page always.Eg:check the snippet.and what you mean by below the series? – XYZ May 22 '17 at 17:37

score 0 · Answer 2 · answered May 22 '17 at 17:34

0

i think in css

  bottom:0

might work

answered May 22 '17 at 17:34

garuna

24
3

It places below series but not in the lowest part! – Lechucico May 22 '17 at 17:36
try some negative value or height: 100% , do reply – garuna May 22 '17 at 17:38

ace francis eli · Answer 3 · 2017-05-23T05:06:00.223

-1

This is Thee CSS Rules

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

edited May 23 '17 at 05:06

answered May 22 '17 at 17:32

ace francis eli

31
5

Safari doesn't have inspect button, can you provide the css rules please? – Lechucico May 22 '17 at 17:33
Please don't submit link only answers. Either provide an actual code solution in your answer, or leave this as a comment to OP's post. – Michael Coker May 22 '17 at 17:33
Sorry @Michael Coker – ace francis eli May 23 '17 at 05:06

Html CSS force to be always in the lowest part

3 Answers3