SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap under footer - sticky footer?

    Gap under footer - sticky footer?

    Hi all

    I have a demo here to illustrate my question.

    http://www.ttmt.org.uk/forum/

    It's a header, content and a footer.
    The content is pushing the footer below the window but the footer still has a gap below.

    Why is there a gap below the footer?

    Do I need a sticky footer?

    What's the best sticky footer for a responsive layout?

    Thanks in advance for any help.


    Code:
      <!DOCTYPE html>
      <html>
        <meta charset="UTF-8">
        <title>Title of the document</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
    
    
        <style type="text/css">
    
          /* http://meyerweb.com/eric/tools/css/reset/ 
             v2.0b1 | 201101 
             NOTE: WORK IN PROGRESS
             USE WITH CAUTION AND TEST WITH ABANDON */
    
          html, body, div, span, applet, object, iframe,
          h1, h2, h3, h4, h5, h6, p, blockquote, pre,
          a, abbr, acronym, address, big, cite, code,
          del, dfn, em, img, ins, kbd, q, s, samp,
          small, strike, strong, sub, sup, tt, var,
          b, u, i, center,
          dl, dt, dd, ol, ul, li,
          fieldset, form, label, legend,
          table, caption, tbody, tfoot, thead, tr, th, td,
          article, aside, canvas, details, figcaption, figure, 
          footer, header, hgroup, menu, nav, section, summary,
          time, mark, audio, video {
          	margin: 0;
          	padding: 0;
          	border: 0;
          	outline: 0;
          	font-size: 100%;
          	font: inherit;
          	vertical-align: baseline;
          }
          /* HTML5 display-role reset for older browsers */
          article, aside, details, figcaption, figure, 
          footer, header, hgroup, menu, nav, section {
          	display: block;
          }
          body {
          	line-height: 1;
          }
          ol, ul {
          	list-style: none;
          }
          blockquote, q {
          	quotes: none;
          }
          blockquote:before, blockquote:after,
          q:before, q:after {
          	content: '';
          	content: none;
          }
    
          /* remember to define visible focus styles! 
          :focus {
          	outline: ?????;
          } */
    
          /* remember to highlight inserts somehow! */
          ins {
          	text-decoration: none;
          }
          del {
          	text-decoration: line-through;
          }
    
          table {
          	border-collapse: collapse;
          	border-spacing: 0;
          }
    
          /* CLEAR FIX */
    
          .clear {
          	clear: both;
          }
    
          .group:after {
          	content: ".";
          	  display: block;
          	  height: 0;
          	  clear: both;
          	visibility: hidden;
          }
    
          *html .group {
          	height:1%;
          }
    
          *:first-child+html .group {
          	min-height: 1px;
          }
    
          .clear {
          	clear:both;
          }
    
          /* END CLEAR FIX */
    
    
          body{
          	font:1em Helvetica, sans-serif;
          }
          #page{
          	max-width:1000px;
          	margin:0 auto;
          }	
    
          header{
          	background:blue;
          	height:100px;
          }
    
          .pageContent{
          	padding:50px 0;
          	background:#eee;
          }
    
          footer{
          	background:#b5b6b9;
          	width:1000px;
          	margin:0 auto;
          }
    
          footer ul{
          	float:left;
          	margin:0 20px 0 0;
          }
          footer ul li:first-of-type a{
          	text-transform:uppercase;
          	font-weight:bold;
          }
          footer a{
          	display:inline-block;
          	color:white;
          	font-size:.8em;
          	padding:1px;
          }
    
    
        </style>
    
        </head>
    
      <body>
    
          <div id="page">
    
            <header class="group">
              <h2>Header</h2>
            </header>  
    
              <section class="pageContent">
                  <h2>Content</h2>
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
                    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
              </section>
    
    
        <footer class="group">
          <h2>Footer</h2>
    
              <ul>
                <li><a href="#">One</a></li>
              </ul>
    
              <ul>
                <li><a href="#">Two</a></li>
                <li><a href="#">2-1</a></li>
                <li><a href="#">2-2</a></li>
                <li><a href="#">2-3</a></li>
                <li><a href="#">2-4</a></li>
              </ul>
    
              <ul>
                <li><a href="#">Three</a></li>
                <li><a href="#">3-1</a></li>
                <li><a href="#">3-2</a></li>
                <li><a href="#">3-3</a></li>
                <li><a href="#">3-4</a></li>
                <li><a href="#">3-5</a></li>
                <li><a href="#">3-6</a></li>
              </ul>
    
        </footer>
    
    
      </body>
    
      </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Code:
          .group:after {
          	content: "";/* note that I removed the period*/  
          	  display: block;
          	  height: 0;
          	  clear: both;
          	visibility: hidden;
          }
    BTW, if your actual site is anything like the sample code, you should use overflow:hidden; to clear floats it's simpler, far more graceful, and cross browser friendly.

    hope that helps

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,833
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RachelR View Post
    Do I need a sticky footer?
    Only you can answer that?

    It all depends on the design and how much content you have. Most sites go below the fold on nearly all pages so a sticky footer would be of no use. If you have very little content then it may look odd with the footer sitting right at the top of the page but them conversely on my 27" imac a footer sitting miles down the page also looks a little odd.
    What's the best sticky footer for a responsive layout?
    The one I just invented here. It is the only one in the world (that I know about) that allows for variable height in the footer which is ideal for responsive or fluid sites where the height of the footer will change when content is squashed. It only supports IE8+ but is still usable in other browsers albeit without the sticky action of the footer.


    /* note that I removed the period*/
    The period is often useful for stopping margin collapse so instead you could just add overflow:hidden to the rule.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •