单页面头尾固定，中间内容超出上下滚动布局

作者: 焚心123 | 来源:发表于2020-08-13 10:08 被阅读0次

单页面头尾固定，中间内容超出上下滚动布局
table 头尾固定，中间滚动
上下固定中间滚动布局(flex/absolute)
ScrollView嵌套ListView滑动冲突处理
多条跑马灯
上下固定中间滚动的移动端布局
Flex布局实现上下固定中间部分滚动
底部footer固定方式
weex布局问题
iScroll 滚动插件的简单使用

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头尾固定，中间上下滚动</title>
    <link rel="stylesheet" href="./css/a.css">
</head>
<body>
    <div class="box">
        <!-- 整体页面布局开始 -->
        <div class="nav">头部标题</div>

            <div class="content">
                <!-- 中间内容上下滚动页面开始布局 -->

                
                <!-- 中间内容上下滚动页面布局结束 -->
            </div>


        <div class="fotter">尾部内容</div>
        <!-- 整体页面布局结束 -->
    </div>
</body>
</html>

less的写法

body,div,p,img,ul,li,ol{
    margin: 0;
    padding: 0;
    list-style: none;/*清除li的原点*/
    vertical-align: middle;/*图片的空隙*/
}
@baseFontSize: 750;//基于视觉稿横屏尺寸/10得出的基准font-size
.vw(@name, @px){
    @{name}: @px/ @baseFontSize * 100vw;
}
body,html{
    height: 100%;
}
.box{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #eee;
    .nav{
        width: 100%;
        .vw(height,80);
        background: #fff;
    }
    .content{
        flex: 1;
        overflow: auto;
    }
    .fotter{
        .nav;
    }
}

转成css

body,
div,
p,
img,
ul,
li,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /*清除li的原点*/
  vertical-align: middle;
  /*图片的空隙*/
}
body,
html {
  height: 100%;
}
.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
}
.box .nav {
  width: 100%;
  height: 10.66666667vw;
  background: #fff;
}
.box .content {
  flex: 1;
  overflow: auto;
}
.box .fotter {
  width: 100%;
  height: 10.66666667vw;
  background: #fff;
}