我的页脚漂浮
我一直在尝试各种“粘”的页脚解决scheme，在三天的较好的一部分，没有成功。 我试图将页脚放在浏览器窗口的底部，当没有足够的内容存在时跨越窗口的整个高度。 请。 帮帮我。
这里是基本的网站结构：
<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，为简洁编辑，也没有反映任何我试过的解决scheme（见下文）：
* { 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%; }
我已经尝试了以下解决scheme（我只能列出两个，显然，因为我缺乏声望点），包括瑞安Fait的…：
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
我不是开发者，只是使用Google的人。 这是我开发的第一个“响应式”网站，也是第一次使用HTML5 / CSS3。
我观察到的一件事是人们（包括Ryan Fait）将样式应用于我所理解的HTML5的语义元素（ <header> ， <article> ， <aside> ， <footer> ）。 这是常见的做法吗？ 如果是这样，我可以减less我使用的结构div的数量，这将是很好的。
此外，我已经尝试closuresfooter上方和下方的siteWrapper div，坚持上面列出的每个解决scheme中演示的各种方法。 我在Chrome，Firefox和Safari浏览过这些不同的解决scheme。
任何帮助，您可以提供非常感谢。
你可以尝试将元素定位为你要设置的其他css属性。 / position：绝对; 底部：0; 宽度：100％; 高度：20px;}或任何你想要的高度。 这会给你一个总是页脚。 希望它有帮助。
这是你的解决scheme。
在我的第一篇文章之后，我想到了为什么不把这些方便的JS小提琴打成一片，所以你在这里： http : //jsfiddle.net/8uHF6/
忘记所有令人沮丧的事情，试图使用包装，并设置其他元素到100％的高度挤出额外的垂直空间的布局，等等。 你刚刚在这里捅到这里，有东西在那里喷出来，所以你在那边戳，有东西在别的地方喷出来。 啊。
使用绝对定位为您的主要布局元素。 基本上，通过指定其顶部和/或底部值（包括您的主要内容元素），可以精确地将元素指定到您想要的位置，当您的窗口垂直更改大小时，会自动缩放以适应可用空间。
告诉你的主要内容元素使用自动溢出，所以内容将出现在页脚下滑动，在视线之外。 如果需要，滚动条将自动出现。 如果你想浮动内部布局浮动主要的内容元素（否则，不要打扰）。 你可以像这样使用stream体或弹性网格布局，等等。
此外，请注意，没有整体的“网站包装”或“页面”div，这是很好的，因为语义网的真正目标是你的HTML包含的内容，只有内容（HTML是数据 ，而不是布局 ） 。 添加诸如包装器的东西到您的HTML控制布局是不幸的。 如果可能的话，布局逻辑的每一位都应该在你的CSS中。
祝你好运！
<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>
粘滞页脚背后的主要思想是，使页脚上方的内容占据视口高度的100％。
然后，包装被强制为100％的最小高度，但是如果内容长度大于视口的大小，也可以使其高于视口的高度。
真正的诀窍在于，在主div的底部，填充填充的空间与页脚的高度相同。 然后，您在页脚上设置一个负顶部边距，以将该div拉入该空间。
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*/ }
我相信适当的技巧是确保你使用这个强制你的页面达到100％的高度：
html, body {height:100%}
另外，你应该添加
height:100%;
到您的#content部分。
试一试，让我知道，如果这给了你正在寻找的结果…
