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，为简洁而编辑，也没有反映我尝试过的任何解决方案（见下文）：

* {
     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>，{{1} }）。这是常见做法吗？如果是这样，我可以减少我正在使用的结构div的数量，这很不错。

此外，我尝试关闭页脚上方和下方的<footer> div，并遵循上面列出的每种解决方案中演示的不同方法。我在Chrome，Firefox和Safari中查看了这些不同的解决方案。

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

Answer 1

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

Answer 2

这是你的解决方案。

在我的第一篇文章之后，我想到为什么不将其中一个方便的JS Fiddles拼凑在一起，所以在这里你去： http://jsfiddle.net/8uHF6/

忘记所有令人沮丧的事情，试图使用包装器并将其他元素设置为100％高度，以便从布局中挤出额外的垂直空间，等等。你最终会遇到这样的情况，你会在那里喷出一些东西，所以你在那里捅了一下，有些东西在其他地方喷出来。啊。

对主要布局元素使用绝对定位。基本上，您可以通过指定其顶部和/或底部值（包括主要内容元素）将元素精确定位到您想要的位置，当您的窗口垂直更改大小时，它将自动缩放以适合可用空间。

告诉您的主要内容元素使用自动溢出，因此内容将显示在页脚下滑动，看不见。如果需要，滚动条将自动出现。如果要在其中放置浮动布局，请浮动主要内容元素（否则，请不要打扰）。您可以在此类内容中使用流体或弹性网格布局，依此类推。

另外，请注意，没有整体的“site-wrapper”或“page”div，这是很好的，因为语义网的真正目标是HTML包含内容，而且只包含内容（HTML是数据，而不是布局）。在HTML中添加诸如包装器之类的东西来控制布局是不幸的。如果可能的话，布局逻辑的每一位都应该在你的CSS中。

祝你好运！

enter image description here

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

Answer 3

粘性页脚背后的主要思想是使页脚上方的内容占据视口高度的100％。

然后强制包裹的最小高度为100％，但如果内容长于视口的大小，则允许它高于视口的高度。

真正的诀窍是，在主div的底部，你填充的填充占用了与页脚高度相同的空间。然后在页脚上设置否定上边距，将div拉到该空间。

http://jsfiddle.net/6L4hE/

enter image description here

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*/
}

Answer 4

我认为正确的诀窍是确保使用以下方法强制页面达到100％的高度：

html, body {height:100%}

此外，您应该添加

height:100%;

到#content部分。

尝试一下，让我知道，如果这给出了你正在寻找的结果......

我的页脚浮动

4 个答案:

HTML

CSS