Footer "stuck" at the bottom of the page and responsive (variable height - using bootstrap)

Navigation
7

I've been following similar questions here in stackoverflow and other network sites, as well as tutorials on the internet, but the vast majority of the solutions do not work as I need them, or even are incompatible with the bootstrap system.

I'm looking for a way to "stick" the footer at the bottom of the page, with variable height (changes depending on the viewport and layout of the internal grid), responsive and with current bootstrap support (3.4.4). It's worth javascript and / or jquery as well.

Is this possible?

    
asked by anonymous 11.05.2015 / 08:17

3 answers

5

Edited Here's an example, to test do the following, leave your window small (about the size of a mobile screen), and load the code below, maximized and load the page again, you will see that the footer is always "stuck" at the end of the "window" 

var principal = {};

principal.start = function(){
  $('#footer').css('position','static');
};

$(window).scroll(function(){   
  //var s = $(document.body)[0].scrollHeight;
  var h = $(window).height();
  s > h ? $('#footer').css('position','static') : $('#footer').css('position','fixed');;
  //$('#footer').css('top',h-42); // CASO PRECISE DESCONTAR O NAVBAR
  $('#footer').css('top',h); // PARA FIXAR O FOOTER NA PARTE INFERIOR DA PAGINA
});

principal.start();
#footer	{
            
            margin: 0px auto 0px auto;
            padding: 0px 0 0 0;
            text-align: center;
            position: static;
            width: 100%;
            
            }
    .fixed { position: fixed; }
    .static { position: static; }
    #footer-left	{
            color: #FFFFFF;	 
            font-size: 11px;
            line-height: 11px;
            padding: 10px 0 10px 0px;
            border-top: 5px solid #A5151E;
            border-bottom: 1px solid #dbdbdb;
            background: #2A2A2A;    
            height: 12px;
            
            } 
    #footer-left a	{
            color: #FFFFFF;
            text-decoration: none;
            }
    #footer-left 	 a.selected,
    #footer-left 	 a:hover	{
            color: red;
            text-decoration: none;
            }
            #conteudo{ height: 300px; width: 100%; background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Sistemas BTR - Transportes</title>                
    </head>
    
<body>         
    <div class="nav-outer-repeat" >
        <ul id="nav" class="nav-outer">            
            <div style="float: right;">                
            </div>            
        </ul>
    </div>        
    <div id="content-outer"><div id="conteudo"> corpo do texto</div></div>
    <!--<div class="clear">&nbsp;</div>-->
    <div id="barraMin" style="height: 0px; overflow-x: auto;" ></div>
    <div id="footer">        
        <div id="footer-left">                            
            <div id="link" style="text-align: center; ">RODAPÉ                   
            </div>                 
        </div>                 
    </div>
    
    <script>
              
    </script>
</body>    
</html>
    
11.05.2015 / 13:43
5

@Vico if you want the navbar to be stuck at the bottom of the page this HTML of the bootstrap can help you (Derived from a question like your SOen ): 

<footer>
        <div class="navbar navbar-inverse navbar-fixed-bottom">
            <div class="container">
                <div class="navbar-collapse collapse" id="footer-body">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Browse Our Library</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Our Partners</a></li>
                        <li><a href="#">User Review</a></li>
                        <li><a href="#">Terms &amp; Conditions</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
              	<div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <ul class="footer-bar-btns visible-xs">
                        <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                        <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                        <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                    </ul>
                </div>
    
            </div>
        </div>

</footer>

You can see it running here: Bootply

As in bootply:

    
11.05.2015 / 13:39
1

Regardless of the size of the content, if the footer size is fixed (ie, height: 150px or something like this, this technique is one of the best I've ever seen.) Sticky Footer

    
12.05.2015 / 19:52
Is it possible to use style sheet in an application? How to tell if the file is being used by another process before attempting to read