absolute模拟实现fixed效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
left: 0; right: 0;
top: 0;bottom: 0;
max-width: 650px;
margin: 0 auto;
}
#fixedHeader {
background-color: pink;
top: 0;
}
#fixedFooter {
background-color: green;
bottom: 0;
}
#fixedHeader, #fixedFooter {
position: absolute;
height: 3em;
width: 100%;
}
#content {
position: absolute;
left: 0;right: 0;
top: 3em;bottom:3em;
background-color: #ccc;
padding: 0 1em 2em;
overflow: auto;
color: #172c45;
line-height: 2;
}
.layout {
width: 100%;
height: 3em;
display: table;
table-layout: fixed;
color: white;
text-align: center;
}
.layout .left, .layout .main, .layout .right {
display: table-cell;
vertical-align: middle;
}
.layout .left {
background: red;
}
.layout .right {
background: blue;
}
.layout .main {
background: black;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="fixedHeader">
<div class="layout">
<div class="left">阅读</div>
<div class="main">电影</div>
<div class="right">评论</div>
</div>
</div>
<div id="content">
<h3></h3>
<p>
<span class="zz"></span>
<time></time>
</p>
<p class="main"></p>
</div>
<div id="fixedFooter">
<div class="layout">
<div class="left">登录</div>
<div class="right">个人中心</div>
</div>
</div>
</div>
<script type="text/javascript">
var 标题 = document.querySelector('#content>h3'),
作者 = document.querySelector('.zz'),
时间 = document.querySelector('time');
内容 = document.querySelector('#content .main')
标题.innerText = '春风十里不如你 原来出自这首诗，读完原诗我彻底凌乱了';
作者.innerText = '诗书沈公子';
时间.innerText = '17-08-1702:12';
内容.innerHTML = `
诗歌发展到唐代，迎来了高峰。唐诗的艺术之美令人惊叹，它朗朗上口，不仅韵律极美，而且富有内涵，从侧面反映了大唐包容、乐观、浪漫的泱泱大国气质。
不知从什么时候开始，“春风十里不如你”成为了一句很文艺的话，而且还衍生出许多句子。其实这句话是出自杜牧的赠别二首其一。杜牧，有小杜之称，他的诗风华流美、雄姿英发，在萎靡的晚唐诗坛以雄健的气概独持拗峭。但是杜牧的文学思想和他的行为却有许多矛盾之处。杜牧曾在牛僧孺手下做掌书记，地点是在扬州。白天杜牧办公，晚上便去过他的风流生活。牛僧孺卸任之后，派人给杜牧送一个盒子，里面全是杜牧狎妓的记录，杜牧羞愧难当。牛僧孺稍稍训斥了杜牧，劝他不要太放纵自己，收敛一下。牛僧孺卸任之后，杜牧也就离开扬州，他做了三首诗，其中就有“春风十里不如你”的原诗。
原诗如下：
<img src = 'http://t11.baidu.com/it/u=3275396440,2124670595&fm=173&s=D8211D72196B7F3E82D5B4C7010070B3&w=640&h=426&img.JPG' width="100%" />
<pre>
娉娉袅袅十三余，
豆蔻梢头二月初。
春风十里扬州路，
卷上珠帘总不如。
姿态美好举止轻盈正是十三年华，
活象二月初含苞待放一朵豆蔻花。
看遍扬州城十里长街的青春佳丽，
卷起珠帘卖俏粉黛没有比得上她。
</pre>
<img src="http://t11.baidu.com/it/u=918247060,611526902&fm=173&s=513AEF7ADEABD76E5208BA3C030040D4&w=640&h=427&img.JPG" width="100%" >
<br />这首诗是杜牧写给他所眷恋的妓女的赠别诗。从诗中可以看出两个人感情真挚，杜牧夸奖她是扬州最漂亮的女人。
诗的第一句正面描述女子的美丽，第二句不再写女子，转而写春花，是将花比女子。“豆蔻”产于南方，其花成穗时，花渐放出，颜色稍淡。南方人摘其含苞待放者，美其名曰“含胎花”，常用来比喻处女。含胎花用来比喻“十三余”的小歌女，是形象优美而又贴切的。“春风”句意兴酣畅，渲染出大都会富丽豪华气派，使人如睹十里长街，车水马龙，花枝招展。这里歌台舞榭密集，美女如云。“珠帘”是歌楼房栊设置，“卷上珠帘”则看得见“高楼红袖”。而扬州路上不知有多少珠帘，所有帘下不知有多少红衣翠袖的美人，但“卷上珠帘总不如”。诗用压低扬州所有美人来突出一人之美，有众星拱月的效果。
“春风十里不如你”虽然是赞美之词，但是知道原诗的含义之后，还是少说为妙。
`
</script>
</body>
</html>
