页面底部或内容的页脚，以较低者为准
我有以下结构：
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
我<article>使用javascript 动态加载内容。因此，<article>块的高度可以改变。
我希望<footer>当有很多内容时，块位于页面的底部，或者当只有几行内容时，在浏览器窗口的底部。
目前我可以做其中一个......但不是两个。
所以有人知道我怎么做 - 让它<footer>坚持到页面/内容的底部或屏幕的底部，取决于哪个更低。
翻过高山走不出你浏览 506回答 3
3回答
-
杨魅力
Ryan Fait的粘性页脚非常好，但我发现它的基本结构缺乏*。Flexbox版本如果你足够幸运，你可以使用flexbox而不需要支持旧的浏览器，粘性页脚变得非常简单，并支持动态大小的页脚。使用flexbox将页脚粘到底部的技巧是让同一容器中的其他元素垂直弯曲。所需要的只是一个全高度的包装元素，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>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>在页脚固定的情况下#main-wrapper，您现在需要#main-wrapper至少达到页面的高度，除非其子项更长。这是通过做#main-wrapper有一个min-height的100%。你还必须记住它的父母，html并且还body需要和页面一样高。CSS：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填充。CSS：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's height等于#main-wrapper's padding-bottom，就应该设置好。*我指手画脚既成事实的结构的原因是因为它设置.footer，并.header在不同的层次级别的元素，同时增加不必要的.push元素。
随时随地看视频慕课网APP
Html5
Html/CSS