Sticky-footer解决方案

发表于:2017-09-13


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>

最终效果


只要掌握弹性布局解决复杂的页面是非常轻松的。

HTML
CSS