像下面那样，footer只会永远紧跟着内容下面，， 但是我们只想要内容不足的时候footer要在最底，当内容足够的时候紧跟着内容后面。
HTML代码
<div id="app">
<header>我是头</header>
<section>
<p>上元夜，指旧历正月十五夜，又称元宵节。我国素有元宵赏灯的风俗。崔液组诗《上元夜》七绝，共六首。描写当时京城长安元宵赏灯的繁华景象。据刘肃《大唐新语》记载：“神龙（唐中宗年号，公元705—707年）之际，京城正月望日（即十五），盛饰灯影之会，金吾弛禁，特许夜行。贵族戚属及下隶工贾，无不夜游。车马喧阗，人不得顾。王、主之家，马上作乐，以相竞夸。文士皆赋诗一章，以记其事。作者数百人，唯中书侍郎苏味道、吏部员外郎郭利贞（苏、郭之作皆五律）、殿中侍御史崔液为绝唱。”这是崔液所作赏灯诗六首中的第一首。</p>
<p>“玉漏银壶且莫催，铁关金锁彻明开。”“玉漏银壶”，计时的器具，古代以漏刻之法计时，具体方法是用铜壶盛水，壶底打通一小孔，壶中立刻度箭，壶中的水逐渐减少，箭上的度数就依次显露，就可按度计时，击鼓报更。元宵夜尽管解除了宵禁，但长安城的钟鼓楼上，仍旧按时报更；人们听了，都嫌时间过得太快，怕不能玩得尽兴，于是说：滴漏箭壶，你不要这样一声比一声紧地催促呀，也不要过得那么快，今夜的城门要一直开到天亮呢！上句写出了人们“欢娱苦日短”的感慨，下句是说在此太平盛世，应该通宵尽兴。吃过晚饭，打扮一新的人们，按捺不住心中的喜悦，迫不及待地早早走出家门，三五成群相邀着、呼唤着、嬉笑着，涌出巷口，融入大街，汇进似潮喧闹欢腾的人流。人们兴高采烈地燃放烟花爆竹，挥舞狮子龙灯，观赏绚丽多彩的灯火，评论着、嬉戏着、赞叹着。越看越高兴，越玩越兴奋，“莫相催”衬托出气氛之热烈，景色之迷人、“彻明开”既写出了元宵节通宵达旦闹花灯时间和程度，又写出了人们高涨而持续的勃勃兴致。</p>
<p>后面接着连用两个问句：“谁家见月能闲坐？何处闻灯不看来？”“谁家”、“何处”，实际是指家家、人人说明万巷皆空的盛况。这包括了上至王侯将相，下至平民百姓形形色色的各类人。因而，“谁家”“何处”这四字包涵的内容实在太多，它把人声鼎沸、车如流水马如龙，灯火闪烁，繁华似锦的京城元宵夜景一语道尽。连用两个诘句，不仅将盛景迷人，令人不得不往的意思表达得灵活传神，而且给人以无限回味的余地，言有尽而意无穷</p>
</section>
<footer>我是脚</footer>
</div>
最终解决方案是Flex Box
弹性盒模型也叫Flex布局，布局非常的灵活。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
header,
footer {
color: #f50;
text-align: center;
}
#app {
height: 100%;
display: -webkit-flex; /* 设置父元素为弹性布局 */
flex-flow: column; /* flex-flow 是 flex-direction 和 flex-wrap 的缩写，设置为垂直，否则的话会在一行 */
}
#app > section {
-webkit-flex: 1; /* 会充满整个父元素的高度， 剩下的空间丢给兄弟元素 */
}
</style>
</head>
<body>
<div id="app">
<header>我是头</header>
<section>
<p>上元夜，指旧历正月十五夜，又称元宵节。我国素有元宵赏灯的风俗。崔液组诗《上元夜》七绝，共六首。描写当时京城长安元宵赏灯的繁华景象。据刘肃《大唐新语》记载：“神龙（唐中宗年号，公元705—707年）之际，京城正月望日（即十五），盛饰灯影之会，金吾弛禁，特许夜行。贵族戚属及下隶工贾，无不夜游。车马喧阗，人不得顾。王、主之家，马上作乐，以相竞夸。文士皆赋诗一章，以记其事。作者数百人，唯中书侍郎苏味道、吏部员外郎郭利贞（苏、郭之作皆五律）、殿中侍御史崔液为绝唱。”这是崔液所作赏灯诗六首中的第一首。</p>
<p>“玉漏银壶且莫催，铁关金锁彻明开。”“玉漏银壶”，计时的器具，古代以漏刻之法计时，具体方法是用铜壶盛水，壶底打通一小孔，壶中立刻度箭，壶中的水逐渐减少，箭上的度数就依次显露，就可按度计时，击鼓报更。元宵夜尽管解除了宵禁，但长安城的钟鼓楼上，仍旧按时报更；人们听了，都嫌时间过得太快，怕不能玩得尽兴，于是说：滴漏箭壶，你不要这样一声比一声紧地催促呀，也不要过得那么快，今夜的城门要一直开到天亮呢！上句写出了人们“欢娱苦日短”的感慨，下句是说在此太平盛世，应该通宵尽兴。吃过晚饭，打扮一新的人们，按捺不住心中的喜悦，迫不及待地早早走出家门，三五成群相邀着、呼唤着、嬉笑着，涌出巷口，融入大街，汇进似潮喧闹欢腾的人流。人们兴高采烈地燃放烟花爆竹，挥舞狮子龙灯，观赏绚丽多彩的灯火，评论着、嬉戏着、赞叹着。越看越高兴，越玩越兴奋，“莫相催”衬托出气氛之热烈，景色之迷人、“彻明开”既写出了元宵节通宵达旦闹花灯时间和程度，又写出了人们高涨而持续的勃勃兴致。</p>
<p>后面接着连用两个问句：“谁家见月能闲坐？何处闻灯不看来？”“谁家”、“何处”，实际是指家家、人人说明万巷皆空的盛况。这包括了上至王侯将相，下至平民百姓形形色色的各类人。因而，“谁家”“何处”这四字包涵的内容实在太多，它把人声鼎沸、车如流水马如龙，灯火闪烁，繁华似锦的京城元宵夜景一语道尽。连用两个诘句，不仅将盛景迷人，令人不得不往的意思表达得灵活传神，而且给人以无限回味的余地，言有尽而意无穷</p>
</section>
<footer>我是脚</footer>
</div>
</script>
</body>
</html>
最终效果
只要掌握弹性布局解决复杂的页面是非常轻松的。