使用Flex 弹性布局来实现手机端顶部，底部固定，中间滑动效果

最新推荐文章于 2024-06-12 16:49:26 发布

@yittu

最新推荐文章于 2024-06-12 16:49:26 发布

阅读量2.2k

点赞数

分类专栏： html css

css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
*{padding:0;margin:0;}
html{
    font-size:14px;
    width:100%;
    height:100%;
    -webkit-font-smoothing:antialiased;
}
body{
    user-select:none;
    width:100%;
    height:100%;
    -webkit-text-size-adjust:none;
}
.page{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    height:100%;
}
.header{
    box-shadow:0px 1px 15px #ccc;
}
.header nav{
    width:100%;
    display:-webkit-box;
    display:flex;
    overflow-y:scroll;
    white-space:nowrap;
}
.header nav *{
    flex:1;
    -webkit-flex:1;
    -webkit-box-flex:1;
    padding:10px 15px; 
}
.page .content{
    padding:15px;
    position:relative;
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}
.page .content *{
    margin-bottom:10px;
}
.footer{
    overflow:hidden;
    background:#fff;
    box-shadow:0px 1px 15px #ccc;
}
.foot-nav{
    text-align:center;
    display:-webkit-box;
    display:flex;
}
.foot-nav *{
    display:block;
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
    padding:15px 0;
}
</style>
</head>
<body>
<div class="page">
    <header class="header">
       <nav>
            <span>推荐</span>
            <span>北京</span>
            <span>军事</span>
            <span>小说</span>
            <span>汽车</span>
            <span>公众号</span>
            <span>美图</span>
       </nav>
    </header>
    <div class="content">
        <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
     <div>   头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。
 
     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：</div>
    </div>
    <footer class="footer">
        <nav class="foot-nav">
            <span>首页</span>
            <span>视频</span>
            <span>个人</span>
        </nav>
    </footer>
</div>
</body>
</html>

原文地址：https://blog.csdn.net/u010881899/article/details/80845369

@yittu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Flex 弹性布局来实现手机端顶部，底部固定，中间滑动效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalabl
复制链接

扫一扫

专栏目录