<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
/* body{
margin:0;
}
.warper{
height:100%;
display: flex;
flex-direction:column;
align-content:stretch;
}
.header{
height:5rem;
background-color: red;
order: 0;
flex-shrink: 0;
}
.footer{
height:3rem;
background-color: rgba(0,255,255,0.5);
order: 2;
flex-shrink: 0;
}
.container{
flex-grow:999;
order: 1;
overflow:hidden;
position: relative;
}
.container .baseline{
min-height:100%;
height:100%;
overflow:auto;
}
.baseline > p:nth-of-type(odd){
background-color: pink
}
.baseline > p:nth-of-type(even){
background-color: lightgreen
}*/
*{
margin:0;
padding: 0;
}
.container{
overflow:hidden;
}
.warper{
height:100%;
padding-top: 5rem;
padding-bottom: 3rem;
position: relative;
}
.header{
text-align: center;
height:5rem;
width: 100%;
background-color: red;
position: fixed;
top: 0;
}
.footer{
text-align: center;
height:3rem;
width: 100%;
background-color: rgba(0,255,255,0.5);
position: fixed;
bottom: 0;
}
.item{
height: 2rem;
border-bottom: .1rem solid;
}
.container .baseline{
min-height:100%;
height:100%;
overflow:auto;
}
.baseline > p:nth-of-type(odd){
background-color: pink
}
.baseline > p:nth-of-type(even){
background-color: lightgreen
}
</style>
</head>
<body>
<div class="warper">
<div class="header">header</div>
<section class="container">
<div class="baseline">
<p class="item">item1</p>
<p class="item">item2</p>
<p class="item">item3</p>
<p class="item">item4</p>
<p class="item">item5</p>
<p class="item">item6</p>
<p class="item">item7</p>
<p class="item">item8</p>
<p class="item">item9</p>
<p class="item">item10</p>
<p class="item">item11</p>
<p class="item">item12</p>
<p class="item">item13</p>
<p class="item">item14</p>
<p class="item">item15</p>
<p class="item">item16</p>
<p class="item">item17</p>
<p class="item">item18</p>
<p class="item">item19</p>
<p class="item">item20</p>
</div>
</section>
<div class="footer">footer</div>
</div>
</body>
</html>
实现的效果：
页面分为header、container、footer三个部分；header、footer固定，中间部分自适应高度；并且这个效果对于不同手机能够适配。
关于这个效果的小结：
1.利用display:flex。给父级元素(warper)设置display:flex;调整主轴方向为column。设置header的高度，order：0，flex-shrink：0。footer的高度，order：2，flex-shrink：0。container的设置是：flex-grow：999(这样中间部分就可以自动拉伸和缩减)；order：1(确定container的顺序是在中间)。
2.百分比布局。关于百分比布局的参照或者说基准是什么？之前我一直认为是父级元素，但是这中看法并不完整，当父级元素有设置高度时，参照是父级，否则的话就向上一级去寻找设置高度的元素，作为参照。在本文的例子中baseline的参照是warper(是不是很震惊)，忽然不是container。
3.拓展一下：我之前的做法是在warper设置padding-top和padding-bottom分别给header和footer让出高度。
网友评论