我有以下结构:
<body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> </body>
我<article>使用javascript 动态加载内容。因此,<article>块的高度可以改变。
<article>
<footer>当有很多内容时,我希望该块位于页面底部;而当仅有几行内容时,我希望该块位于浏览器窗口的底部。
<footer>
目前,我可以做一个或另一个…但是不能两者都做。
因此,有谁知道我该怎么做-将<footer>其固定在页面/内容底部或屏幕底部,具体取决于哪个较低。
RyanFait的粘性页脚非常好,但是我发现它的基本结构缺乏*。
Flexbox版本
如果您足够幸运,可以在不需要支持旧版浏览器的情况下使用flexbox,那么粘性页脚将变得轻而易举, 并 支持动态大小的页脚。
使用flexbox使页脚固定在底部的诀窍是使同一容器中的其他元素垂直弯曲。它所需要的只是一个全高包装元素,display:flex其中至少一个具有flex大于的同级元素0:
display:flex
flex
0
CSS:
html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { display: flex; flex-direction: column; min-height: 100%; } article { flex: 1; } html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100%; } article { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } 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>
如果您不能使用flexbox,我选择的基本结构是:
<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>
#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>
在页脚固定到的情况下#main-wrapper,您现在#main-wrapper至少需要等于页面的高度,除非其子级更长。这是通过做#main-wrapper有一个min-height的100%。您还必须记住它的父母,html并且body必须与页面一样高。
#main-wrapper
min-height
100%
html
body
html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { min-height: 100%; padding: 0 0 100px; position: relative; } footer { bottom: 0; height: 100px; left: 0; position: absolute; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { min-height: 100%; 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>
当然,您应该对我的判断提出质疑,因为即使没有内容,此代码也会迫使页脚从页面底部掉下来。最后一个诀窍是要改变由所使用的盒模型#main- wrapper,使得min-height中100%包括100px填充。
#main- wrapper
100px
html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { box-sizing: border-box; min-height: 100%; padding: 0 0 100px; position: relative; } footer { bottom: 0; height: 100px; left: 0; position: absolute; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; } #main-wrapper { box-sizing: border-box; min-height: 100%; 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>
有了原始HTML结构的页脚。只是要确保footer的height是等于#main-wrapper的padding-bottom,你应该设置。
footer
height
padding-bottom
*我发现Fait的结构存在缺陷是因为它在不同的层次结构上设置了.footerand.header元素,同时添加了不必要的.push元素。
.footer
.header
.push