Skip navigation
BobM1990
Currently Being Moderated

Footer at bottom of screen or at bottom of page

Feb 23, 2013 3:12 PM

Tags: #content #screen #footer #page

Hi guys

 

I'm creating a new website which I would like to give a footer that stays on the bottom of the screen if the content only needs the screen height, but that follows the content if the content makes it a scrollable page?

 

So if there are for example only 3 lines of text between my header and my footer on the webpage, I would like to have the footer at the bottom of the screen instead of just below the text. If there is a lot of content which makes the page scrollable, I would like to have the footer at the bottom of the page, below the content.

 

Do you understand what I mean?

 

Thanks!

 

Bob

 
Replies
  • Currently Being Moderated
    Feb 23, 2013 3:43 PM   in reply to BobM1990

    I'll show you how but I don't recommend doing this becuase it relies on hacks that don't work well in all devices.  Nobody really cares if your footer is aligned at the bottom of the screen on short pages. 

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Alt-Web Template :: 100% Height Layout</title>
    
    <style type="text/css">
    /**
    * 100% height layout with header, sidebar and footer
    */
    
    html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    font-family:arial,helvetica,sans-serif;
    font-size:small;
    color:#666;
    }
    
    #container {
    z-index:1;
    position:relative; /* needed for footer positioning*/
    margin:50px auto; /* center, not in IE5 */
    width:750px;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treated as min-height*/
    min-height:100%; /* real browsers */
    overflow:hidden;/*float containment*/
    background:#FFF; /*for equal height columns, use a 2-toned background image here*/
    }
    
    #header {
    padding:1em;
    background-color:#FFFFCC;
    border-bottom:6px double gray;
    }
    
    #sidebar {
    float:left;
    width:8.79em;
    background-color:#FFCC00;
    padding: 1em;
    margin-top: 5.5%;
    }
    
    #content {
    padding:1em 1em 5em; /* bottom padding for footer */
    margin-left: 11em;
    border-left: 6px double gray;
    background-color: #EAEAEA;
    }
    
    #footer {
    position:fixed;
    width:725px;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
    min-height: 40px;
    padding:1em;
    }
    
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="header">
    <p>#header</p>
    <h1>100% Page Height </h1>
    </div>
    
    <div id="sidebar">
    <p>#sidebar</p>
    <p>Footer remains fixed at viewport bottom, even on short pages.</p>
    </div>
    
    <div id="content">
    <p>#content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In libero dolor, facilisis eu tristique suscipit, consectetur vel tortor. Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui, vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae vehicula. </p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam quis justo quam. Nullam aliquam luctus suscipit. </p>
    <p>Ut id nibh nec nisi ullamcorper vehicula. Phasellus lacus lectus, euismod sed tincidunt ac, laoreet venenatis libero! In hac habitasse platea dictumst.</p>
    <p>Donec eget nisi ut dolor convallis vestibulum non sagittis libero. Donec tempor pretium nibh nec dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et   pretium arcu. Donec eget nisi ut dolor convallis vestibulum non sagittis   libero. Donec tempor pretium nibh nec dapibus. Vestibulum ante ipsum   primis in faucibus orci luctus et ultrices posuere cubilia Curae; In   libero dolor, facilisis eu tristique suscipit, consectetur vel tortor.   Phasellus tristique; metus ac rutrum sodales, purus diam tincidunt dui,   vitae fringilla nunc magna in nisi. Fusce felis erat, elementum eu   sollicitudin quis, rutrum a ante. Integer ullamcorper rutrum dolor vitae   vehicula. </p>
    </div>
    
    <div id="footer">
    #footer
    </div>
    
    <!--end container --></div>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Feb 25, 2013 1:17 AM   in reply to BobM1990

    Google 'Sticky Footer' or 'Sticky DIV'. You'll find many examples that you could choose from.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points