My Footer Floats | 易学教程

问题

I have been trying various \"sticky\" footer solutions for the better part of three days with no success. I seek to place the footer at the bottom of the browser window in instances when not enough content is present to span the window\'s full height. Please. Help.

Here\'s the basic site structure:

<div id=\"siteWrapper\">
     <header>
         <div id=\"header\">
             <div id=\"headerWrapper\"></div>
         </div>
     </header>

     <div id=\"content\">
          <div id=\"innerWrapper\">
               <div id=\"columnLeft\"></div>

               <aside>
                    <div id=\"aside\">
                         <div id=\"asideWrapper\"></div>
                    </div>
               </aside>

          </div>
     </div>

     <footer>
          <div id=\"footer\">
               <div id=\"footerWrapper\"></div>
          </div>
     </footer>

</div>

And the associated CSS, edited for brevity, and also not reflecting any of the solutions I\'ve tried (see below):

* {
     margin: 0;
     padding: 0;
     }

#header {
     width: 100%;
     display:inline-block;
     }

#headerWrapper {
     width: 90%;
     max-width:980px;
    }

#sitewrapper {
     width: 100%;
     min-height: 100%;
    }

#content {
     padding: 2%;
     width:90%;
     max-width: 980px;   
    }

#innerWrapper {
     display:inline-block;
    }

#columnLeft {
     display: inline-block;
     width: 70%;
     float: left;
     }

#aside {    
     width: 30%;
     float: right;
     }

#footer {
     background-color: #f5f5f5;
     width: 100%;
     }

I have tried the following solutions (I can only list two, evidently, because I lack reputation points), including Ryan Fait\'s...:

http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/

I\'m not a developer, just someone who uses Google. This is the first \"responsive\" site I\'ve developed, and the first time using HTML5 / CSS3.

One thing I\'ve observed is people (Ryan Fait included) applying styles to what I understand to be HTML5\'s semantic elements (<header>, <article>, <aside>, <footer>). Is this common practice? If so, I can reduce the number of structural div\'s I\'m using, which would nice.

Also, I have tried closing the siteWrapper div both above and below the footer, adhering the varying methods demonstrated in each solution listed above. I have viewed these various solutions in Chrome, Firefox, and Safari.

Any help you can provide is greatly appreciated.

回答1:

you could try positioning the element as { /other css attribs you want to set...;/ position: absolute; bottom:0; width:100%; height: 20px;} or whatever height you want. This will give you an always on footer. Hope it helps.

回答2:

Here's your solution.

After my initial post, I figured why not slap together one of those handy JS Fiddles, so here you go: http://jsfiddle.net/8uHF6/

Forget all that frustrating business of trying to use wrappers and set other elements to 100% height to squeeze the extra vertical space out of the layout, and so on. You just end up in a situation where you poke over here, and something squirts out over there, so you poke over there, and something squirts out somewhere else. Ugh.

Use absolute positioning for your main layout elements. Basically, you nail the elements down exactly where you want them by specifying their top and/or bottom values, including your main content element, which will automatically scale to fit the available space as your window changes size vertically.

Tell your main content element to use automatic overflow, so the content will appear to slide under the footer, out of sight. A scrollbar will appear automatically if it's needed. Float the main content elements if you want a floated layout inside of them (otherwise, don't bother). You can use a fluid or elastic grid layout inside of something like this, and so on.

Also, note that there is no overall "site-wrapper" or "page" div, which is kind of nice since the real goal of the semantic web is that your HTML contains content, and only content (HTML is data, not layout). Adding things like wrappers to your HTML to control layout is unfortunate. If possible, every last bit of layout logic should be in your CSS.

Good luck!

<html>
    <head>
        <style>
            html {
                height: 100%;
                min-height: 100%;
                font-size: 100%;
            }

            body {
                margin: 0;
                height: 100%;
                min-height: 100%;
            }

            header {
                background-color: #FF0000;
                float: left; /* if you want a layout with floated descendants... */
                position: absolute;
                width: 100%;
                top: 0;
                overflow: hidden;
                height: 4.6em;
                border-bottom: 0.15em solid yellow;
            }

            article {
                background-color: #CCCCCC;
                float: left;
                position: absolute;
                width: 100%;                
                top: 4.75em;
                bottom: 2.75em;
                overflow: auto;
            }

            footer {
                background-color: #AACCFF;
                float: left;
                position: absolute;
                width: 100%;
                height: 2.75em;
                bottom: 0;
                border-top: 0.15em solid blue;
            }
        </style>
    </head>
    <body>        
        <header>
            Header Stuff...
        </header>
        <article>
            Resize shorter vertically to see what happens when the content overflows.<br/>
            1<br/>
            2<br/>
            3<br/>
            4<br/>
            5<br/>
            6<br/>
            7<br/>
            8<br/>
            9<br/>
            10<br/>
            11<br/>
            12<br/>
            13<br/>
            14<br/>
        </article>
        <footer>
            Footer stuff...
        </footer>
    </body>
</html>

回答3:

The main idea behind sticky footer is that you make the content above the footer take up 100% of the viewport height.

The wrap then is forced to have a min-height of 100%, but also allows it to be taller than the height of the viewport if the content is longer than the size of the viewport.

The real trick is that at the bottom of the main div, you put padding that takes up the same amount of space as the footer's height. Then you set a negative top-margin on the footer to pull the div up into that space.

http://jsfiddle.net/6L4hE/

HTML

<div id="wrap">
    <div id="main">
        <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    </div>
</div>
<div id="footer"></div>

CSS

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

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

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

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}