CODEWITHSUNDEEP
pythonhtmlcssjinja2
Hara
Hara

Reputation: 71

why my footer appears in the middle - flask & jinja2

I'm using Flask/Jinja2 blocks to create HTML. I ran into this issue where my footer is in the middle. it looks OK (at the bottom) in pages where there is less or no content. I've tried everything.

Here is the HTML and CSS:

h1, h2, h3, h4 { font-family: Sansita, serif }
p { font-size: smaller }
ul { position: relative; top: 25px; right: 25px }
footer{ position: absolute; width: 100%; background: aliceblue; bottom: 0; height: 50px}
<!DOCTYPE html>
<html lang="en">
   <head>
      <title> books inc </title>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
      <link rel="stylesheet" href="/static/css/styles.css">
   </head>
   <body>
      <nav class="navbar navbar-inverse">
         <div class="container">
            <a class="navbar navbar-text" href="/">
               <h3 class="title"> The Books Shop Around the Corner </h3>
            </a>
            <ul class="nav navbar-nav pull-right">
               <li><a href=""> Home </a></li>
               <li><a href=""> Register </a></li>
               <li><a href=""> SignIn </a></li>
            </ul>
         </div>
      </nav>
      
      <div class="container books">
         <div class="row">
            <div class="col-md-4">
               <img src="static/img/broom-145379.svg"
                  alt="book-img" height="200" width="180" class="img-rounded">
               <h4>Miky&#39;s Delivery Service</h4>
               <p>Authors: William Dobelli</p>
               <p>Format: ePub</p>
               <p>Rating: 3.9</p>
               <p>Pages: 123</p>
               <p><a href="/display/publisher/1">Publisher Id: 1</a></p>
            </div>            
         </div>
      </div>
      
      <footer>
         <br>
         <p class="text-center small"> Books Inc | 2017</p>
      </footer>

   </body>
</html>

Upvotes: 1

Views: 2645

Answers (2)

1ronmat
1ronmat

Reputation: 1177

your footer is on absolute position. So use position:fixed and build your css as folow:

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

Don't forget to do this if you want a css compatibility for IE6.

* html footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+
   (document.documentElement.clientHeight ? 
   document.documentElement.clientHeight : document.body.clientHeight)+
  (ignoreMe = document.documentElement.scrollTop ? 
  document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

You can also remove the br in your footer. Prefer to use a padding-top for this use case. It's much cleaner.

Upvotes: 0

robru
robru

Reputation: 2383

Your problem is position: absolute. That will place the item exactly where it says to put it, which is at the bottom of the screen. If the content overflows, the footer stays put. What you really want is position: fixed

Upvotes: 1

Related Questions