问题1:父容器设置flex布局,导致子项目的高度为0
原因:子项目中有个flex-shirk:1; 就是高度不够的时候默认收缩,而导致高度或则宽度给缩没了
解决方案:给出现这个问题的元素添加 flex-shirk:0; 让它不缩就ok
问题2:APP端底部导航栏的固定,在不使用position:fixed;的方式下,应该如何实现?主体设置flex-gorw:1;自动撑满剩余空间,但是这种会导致底部导航栏位置滑动。
解决方案:让主体超出部分进行滚动,就可以解决。overflow:auto;或则overflow:scroll;
body,
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
height: 100px;
flex-grow: 1;
overflow: auto;
}
// 底部导航栏tabBar
#tabBar {
box-sizing: border-box;
width: 100%;
border-top: 2px solid #e7e7e7;
background-color: #fff;
display: flex;
justify-content: space-evenly;
align-items: center;
a {
font-size: 14px;
color: #8a8a8a;
display: flex;
flex-direction: column;
align-items: center;
}
span {
display: flex;
flex-direction: column;
font-size: 38px;
color: #8a8a8a;
}
.active {
color: #4294ff !important;
}
.active span{
color: #4294ff !important;
}
}