All geek questions in one place

Lower lower footer position

In the HTML page I made, I wanted to add a footer. I use Bootstrap and in this example it is shown that the footer element can be positioned at the bottom of the page without placing the footer element inside the container element (directly inside the body element, under the container element).

Whenever I do this myself, it looks like the element will be located at the bottom first. But then I noticed that on other pages (which were more on the content), the footer began to appear at the bottom of the browser instead of the body element. The effect is that the container element above the footer will be displayed behind and below the footer, without the footer going to the bottom of the body element.

Be sure to scroll through the following code example that I made:

.body { overflow: scroll; background-color: tomato; /*The height is set so that an overflow: scroll; can happen, to reproduce my sitation. When the content of the body tag is too long, the browser will show a scroll bar and when scrolling down, the footer does not appear on the bottom anymore but somewhere in the middle or maybe even top side, depending on how long the body would become. */ height: 300px; position: relative; } .container { background-color: yellow; /*This would be a dynamic number, when removing this property. If you do not really understand the idea I am talking about, try to change this value and see for yourself what happens (with the footer element). The height is set only for the sake of showing the issue. */ height: 500px; } footer { background: #e0f2f7; position: absolute; bottom: 0; width: 100%; } 
 <div class="body"> <h2> Foo </h2> <div class="container"> asdasds </div> <footer>sadasdsa</footer> </div>

What can I do to make my footer behave the same way as in the Bootstrap Example (so that it always sticks to the bottom) and without having to insert a footer into a specific container element?

0
source share
4 answers

If you want the footer to be displayed all the time at the bottom of the site, but not above the container. You need to add a minimum height: 100% and position: relative to html not for the body. For the body element, you need to add margin-bottom with the value of the footer height.

 html{ min-height:100%; position: relative; } body { background-color: tomato; margin:0 0 60px 0; padding:0; } .container { background-color: yellow; height: 300px; } footer { background: #e0f2f7; position: absolute; bottom: 0; width: 100%; height:60px; } 
 <html> <body> <h2>Foo</h2> <div class="container">asdasds</div> <footer>sadasdsa</footer> </body> </html>

Change 1:

If you want dynamic footer height to use this JS code (if you use jQuery)

 $( document ).ready(function() { var height = $( 'footer' ).height(); $( 'body' ).css('margin-bottom',height + 'px'); });
+1
source

If I understand your question correctly, below is your desired result?

This is because you set the body height to 300 pixels; The result in the footer is 300 pixels above. Delete this line and everything should be fine.

 .body { overflow: scroll; background-color: tomato; position: relative; } .container { background-color: yellow; /*This would be a dynamic number, when removing this property. If you do not really understand the idea I am talking about, try to change this value and see for yourself what happens (with the footer element). The height is set only for the sake of showing the issue. */ height: 500px; } footer { background: #e0f2f7; position: absolute; bottom: 0; width: 100%; } 
 <div class="body"> <h2> Foo </h2> <div class="container"> asdasds </div> <footer>sadasdsa</footer> </div>
0
source 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Footer at bottom</title> <style> .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 20px; background-color: #efefef; text-align: center; } </style> </head> <body> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> </body> </html>

So you can always save the footer at the bottom of the page

0
source

You can simply do this using the navbar-fixed-bottom class for the nav element. Try this example. To find out how it works, you can check this page - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Bootstrap 3 Fixed Navbar</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> body{ padding-bottom: 70px; } </style> </head> <body> <nav role="navigation" class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Brand</a> </div> <!-- Collection of nav links and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <p style="line-height: 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed.</p> </div> </body> </html>
0
source

Source: https://habr.com/ru/post/1246060/

More articles:


All Articles