页脚底部或内容,以较低者为准

我有以下结构:

<body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> </body> 

我使用JavaScriptdynamic加载<article>中的内容。 因此, <article>块的高度可以改变。

当存在大量内容时,我希望<footer>块位于页面的底部,或者只有less量内容存在时,位于浏览器窗口的底部。

目前我可以做一个或另一个…但不是两个。

所以没有人知道我可以做到这一点 – 获取<footer>坚持页面/内容的底部或屏幕的底部,取决于哪一个更低。

瑞安Fait的粘脚是非常好的,但是我发现它的基本结构是缺乏*。

我select的基础结构是:

 <div class="page"> <div class="page__inner"> <header class="header"> <div class="header__inner"> </div> </header> <nav class="nav"> <div class="nav__inner"> </div> </nav> <main class="wrapper"> <div class="wrapper__inner"> <div class="content"> <div class="content__inner"> </div> </div> <div class="sidebar"> <div class="sidebar__inner"> </div> </div> </div> </main> <footer class="footer"> <div class="footer__inner"> </div> </footer> </div> </div> 

这并不是那么遥远:

 <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> 

让页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。 这要求页脚的高度是静态的,但是我发现页脚通常是静态的高度。

HTML:

 <div id="main-wrapper"> ... <footer> </footer> </div> 

CSS:

 #main-wrapper { padding: 0 0 100px; position: relative; } footer { bottom: 0; height: 100px; left: 0; position: absolute; width: 100%; } 
 #main-wrapper { padding: 0 0 100px; position: relative; } footer { bottom: 0; height: 100px; left: 0; position: absolute; width: 100%; } header { background-color: #F00; } nav { background-color: #FF0; } article { background-color: #0F0; } footer { background-color: #00F; } 
 <div id="main-wrapper"> <header> here be header </header> <nav> </nav> <article> here be content </article> <footer> here be footer </footer> </div> 

Ryan Fait的粘性页脚是一个简单的解决scheme,我过去曾多次使用过。

基本的HTML

 <div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class="content"></div> <div class="push"></div> </div> <div class="footer"></div> 

CSS

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ 

把它翻译成类似于你已经有了结果的东西:

HTML

 <body> <div class="wrapper"> <header> </header> <nav> </nav> <article> </article> <div class="push"></div> </div> <footer> </footer> </body> 

CSS:

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } footer, .push { height: 142px; /* .push must be the same height as .footer */ } 

只是不要忘记更新包装页边上的负值,以匹配页脚和推送div的高度。 祝你好运!

在这里( 让页脚贴在页面的底部 )是一个伟大的职位/教程来解决你的问题…试试吧。