html中div被挤下来,移动端布局，底部的div被挤下去，麻烦帮看看

上代码

1

* {

margin: 0px;

padding: 0px;

}

html {

height: 100%;

}

body {

min-height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

}

.wp {

height: 200px;

background-color: pink;

}

.footer {

position: fixed;

bottom: 100px;

white-space: nowrap;

overflow-x: scroll;

overflow-y: hidden;

text-align: center;

line-height: 60px;

background-color: #DEDEDE;

width: 100%;

height: 60px;

}

.nav {

display: inline-block;

width: 200px;

height: 60px;

border-right-style: solid;

border-right-width: 1px;

border-right-color: #EEEEEE;

}

.image {

width: 62px;

height: 60px;

}

测试

测试

测试

测试

测试

测试

测试

测试模块

测试模块

测试模块

测试模块

测试模块

测试模块

测试模块

list.png

效果图

求问大神是啥情况，前端小白求大腿