上下固定,中间自适应(手机移动端)
注意:引入了js文件
<script src="js/rem.js"></script>
<header>页头</header>
<main>主体
<div></div>
</main>
<footer>页脚</footer>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
width: 7.5rem;
height: 0.5rem;
background-color: blue;
}
main {
width: 7.5rem;
/* height: 500rem; */
background-color: crimson;
flex: 1;
overflow: auto;
}
div {
width: 3rem;
height: 10rem;
background-color: cornflowerblue;
}
footer {
width: 7.5rem;
height: 0.5rem;
background-color: darkorange;
}
主体天蓝色,自适应,出现了滚动条