CSS秘密花园: Sticky footers

MatFulton 8年前
   <p>《 <a href="/misc/goto?guid=4958976660757929944" rel="nofollow,noindex">CSS Secrets</a> 》是 <a href="/misc/goto?guid=4958976660849001117" rel="nofollow,noindex">@Lea Verou</a> 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。</p>    <p><img src="https://simg.open-open.com/show/b873adc9c0b700ab68ae0efe9cf398be.jpg"></p>    <h3>问题</h3>    <p>在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。</p>    <p>这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,但使用现代CSS,我们能把这个效果做得更好,那要如何做呢?</p>    <p>如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话,这里有一些受欢迎的文章,提供了许多Web开发人员的构思和解决方案:</p>    <ul>     <li><a href="/misc/goto?guid=4959670901094566220" rel="nofollow,noindex">CSS Sticky Footer Layout</a></li>     <li><a href="/misc/goto?guid=4959670901186984170" rel="nofollow,noindex">Ryan Fait's CSS Sticky Footer</a></li>     <li><a href="/misc/goto?guid=4959670901265614116" rel="nofollow,noindex">Sticky Footer</a></li>     <li><a href="/misc/goto?guid=4959670901353047250" rel="nofollow,noindex">Sticky CSS footers: The flexible way</a></li>     <li><a href="/misc/goto?guid=4959670901422454167" rel="nofollow,noindex">Modern Clean CSS “Sticky Footer”</a></li>    </ul>    <p>最后两个是最简洁的实现方案,但仍然有其自己的局限性。</p>    <h3>固定高度的解决方案</h3>    <p>我们在 <body> 元素下使用一些常用的HTML标签元素:</p>    <pre>  <code class="language-css"><header>      <h1>Site name</h1>  </header>  <main>      <p>Bacon Ipsum dolor sit amet...      <!-- Filler text from baconipsum.com --></p>  </main>  <footer>  <p>© 2015 No rights reserved.</p>  <p>Made with ♥ by an anonymous pastafarian.</p>  </footer>  </code></pre>    <p>给页面写一些基本样式。看到的效果如下图所示:</p>    <p><img src="https://simg.open-open.com/show/36521b09d735b8daa60e4620e0e90194.png"></p>    <p>现在,我们来减少一些内容。你可以看看会发生什么,如下图所示:</p>    <p><img src="https://simg.open-open.com/show/35e254c49cc4d24a593e4d67d3823f0b.png"></p>    <p>太好了,问题出现了,但我们要如何解决这个问题呢?</p>    <p>如果我们假定页脚文本不会溢出容器,我们可以为容器推算出其高度:</p>    <pre>  <code class="language-css">2行 * 行高 + 3 x 段落的margin + 垂直的padding = 2 x 1.5em + 3 x 1em + 1em = 7em  </code></pre>    <p>同样,页头的高度是 2.5em 。因此,通过使用视窗相对单位和 calc() ,使用一行CSS代码,可以实现Sticky footers效果:</p>    <pre>  <code class="language-css">main {      min-height: calc(100vh - 2.5em - 7em);      /* Avoid padding/borders screwing up our height: */      box-sizing: border-box;  }  </code></pre>    <p>或者,我们可以使用一个容器将 <header> 和 <main> 元素包裹起来,这样我们只需要计算页脚的高度:</p>    <pre>  <code class="language-css">#wrapper {      min-height: calc(100vh - 7em);  }  </code></pre>    <p><img src="https://simg.open-open.com/show/9e073cbe5a391403affe8b270bed9c65.png"></p>    <p>这似乎略优于现有的固定高度的解决方案,主要是由于其简单。然而,除了简单的布局,但这是不切合实际。它要求我们每次都要计算包裹页脚文本容器的高度,这样我们需要每次计算容器的 min-height 。除非我们愿意添加HTML容器来包裹我们的标题和内容,不过同意也要计算。当然,在这个时代,我们可以做得更好,对吗?</p>    <h3>Flexbox解决方案</h3>    <p>解决这类问题,Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现,而且不需要一些奇怪的计算或添加额外的HTML元素。首先,我们需要在 <body> 元素上设置 display:flex 。如果父元素( <body> )的三个块元素,使用Flexbox切换布局,还需要设置 flex-flow:column ,否则这三个块会排成一行。如下图所示:</p>    <p><img src="https://simg.open-open.com/show/965cf8b4c07dc53851677cf927040c33.png"></p>    <pre>  <code class="language-css">body {      display: flex;      flex-flow: column;  }  </code></pre>    <p>在这一点上,我们的页面看起来和之前一样,因为每个元素所占视窗高度是由其内容决定。如此一来,我们可以说还没有真正的利用上Flexbox。</p>    <p>从实际出发,需要给 <body> 设置 min-height 值为 100vh ,让 <body> 内容不足视窗高度时也能占据整个视窗。虽然这样做了,效果看起来,还是如下图所示:</p>    <p><img src="https://simg.open-open.com/show/e16f8d5af1c71b1b7f014f5278ca0374.png" alt="CSS秘密花园: Sticky footers" width="340" height="264"></p>    <p>即使给 <body> 指定了最小高度,但每个盒子的高度仍取决于其内容大小。</p>    <p>这里我们需要在页头和页脚设置高度,但其内容的高度自动伸缩的来适配剩余空间。我们可以在 <main> 上设置 flex 值大于 0 (常用的是 1 ):</p>    <pre>  <code class="language-css">body {      display: flex;      flex-flow: column;      min-height: 100vh;  }  main { flex: 1; }  </code></pre>    <p>flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 三个属性缩写。任何元素设置了 flex 大于 0 ,元素就会灵活的控制自己的尺寸,来适配容器的剩余空间。例如,如果 <main> 设置了 flex:2 , <footer> 设置了 flex:1 ,那么页脚的高度是主内容高度的二分之一,同样的,如果值设置的是 4 和 2 而不是 2 和 1 ,他们效果是一样的,因为他们的倍数比例值一样。</p>    <p>就这样,不需要更多的代码!就能实现如下图所示的Sticky footers效果:</p>    <p><img src="https://simg.open-open.com/show/9e073cbe5a391403affe8b270bed9c65.png" alt="CSS秘密花园: Sticky footers" width="343" height="268"></p>    <p>仅仅用了四行代码,是不是觉得Flexbox很强大,很完美呀。</p>    <p>来自: <a href="/misc/goto?guid=4959670901506868570" rel="nofollow">http://www.w3cplus.com/css3/css-secrets/sticky-footers.html</a></p>