移动端,控制头部尾部固定

来源:互联网 发布:横县教研室网络硬盘 编辑:程序博客网 时间:2024/05/16 16:23

直接上代码:

用flex布局

<!DOCTYPE html><html><head><title>头尾部固定</title></head><style>*{margin: 0;padding: 0;}.container{display: flex;display: -webkit-flex;    min-height: 100vh;    flex-direction: column;    text-align: center;    font-size: 50px;font-weight: bold;}header,footer{height: 100px;background-color: #20b;line-height: 100px;color: #fff;}.middle{flex: 1;}</style><body><div class="container"><header>头部</header><div class="middle">中间部分</div><footer>尾部</footer></div></body></html>
效果图如下: