Geek asks and answers

Header to bottom of page without (unnecessary) scroll bars

EDIT 2:

An error occurred in my code that caused the footer to not stick to the bottom of the page. My code looked something like this:

<div id="footer">
 <div id="copyright-bg" class="container">
  <div class="row">
   <div class="twelvecol">
    <p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>

I removed <div id="footer">and moved these CSS properties to id="copyright-bg", and then started to stick to the bottom correctly. But now there is another problem! Now I have extra scrollbars! Here is a fiddle that has the simplest code to try to understand what is going on. I thought it might be a gradient, but when I changed the code to a solid background, scrollbars still appeared.

Note. I tested in Chrome and Firefox.

EDIT:

CSS Sticky Footer .

, CSS (?) .

- , , ! , .

, ( IE ), .

:

Screenshothot

. , Done , .

, . height: 100%; body, , , , . height: 100% . . , .

? ( CSS, , jQuery/Javascript)

CODE

HTML:

<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
    <p class="copyright-text">Ipsum</p>
</div>
</div>
</div>

CSS

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
    margin: 0;
    padding: 0;
    text-align: justify;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
    /* Vendor Specific Background Gradients... */
}

#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
    border-top: 5px solid #E31836;
padding:1.250em;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
}

.row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
 }

.row .twelvecol {
    width: 100%;
    float: left;
 }
+5
2

(, Ryan Fait CSS Sticky Footer ( , . ), ), , . , . , , , , , , . , , .

EDIT:

, . jsFiddle. , . CSS:

* {margin:0;padding:0;} 
html, body {height: 100%;}

#content-wrap {min-height: 100%;}

100% , . (*) reset , (html) (body), . , CSS, #content-wrap min-height 100%.

, 180 , 100 . jsFiddle. :

#main {overflow:auto;
    padding-bottom: 100px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;}

, ( ). , !

+3

, , . , :

HTML

<body>
 <div id="page-content">
   <header> 
     <!-- Header Content Goes Here --> 
   </header> 

     <!-- Page Content Goes Here --> 

   <footer>
     <!-- Footer Content Goes Here --> 
   </footer>

 </div>
</body>

JS

$(function() {
   var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
 $("#page-content").css("min-height",height+"px");
});

, , . .

. HTML5.

+2

More articles:


All Articles