html - 我的页脚 float

Question

在三天的大部分时间里，我一直在尝试各种“粘性”页脚解决方案，但没有成功。当没有足够的内容来跨越窗口的整个高度时，我试图将页脚放在浏览器窗口的底部。请。帮助。

这是基本的站点结构:

<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>

以及相关的 CSS，为简洁起见进行了编辑，也没有反射(reflect)我尝试过的任何解决方案(见下文):

* {
     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%;
     }

我已经尝试了以下解决方案(我只能列出两个，显然，因为我缺乏声誉点数)，包括 Ryan Fait 的...:

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

我不是开发人员，只是使用 Google 的人。这是我开发的第一个“响应式”网站，也是第一次使用 HTML5/CSS3。

我观察到的一件事是人们(包括 Ryan Fait)将样式应用于我理解为 HTML5 的语义元素(<header>、<article>、<aside>、<footer>)。这是常见的做法吗？如果是这样，我可以减少正在使用的结构 div 的数量，这会很好。

另外，我试过关闭 siteWrapper div 在页脚上方和下方，遵循上面列出的每个解决方案中演示的不同方法。我在 Chrome、Firefox 和 Safari 中查看了这些不同的解决方案。

非常感谢您提供的任何帮助。

Answer 1

您可以尝试将元素定位为 {/您要设置的其他 css 属性...;/position: absolute;底部:0；宽度:100%； height: 20px;} 或任何你想要的高度。这会给你一个永远在线的页脚。希望对您有所帮助。