城阳建网站,中国纪检监察报杂志,汕头网络科技有限公司,大冶网站开发tabBar原本是 position: fixed的布局#xff0c;会导致元素脱标#xff0c;不占位#xff0c;上面的内容就会被覆盖
.layout {height: 100%;display: flex;flex-direction: column;.main{flex: 1;overflow: hidden; // 隐藏二级路由中超出main高度的内容}.van-tabbar {posi… tabBar原本是 position: fixed的布局会导致元素脱标不占位上面的内容就会被覆盖
.layout {height: 100%;display: flex;flex-direction: column;.main{flex: 1;overflow: hidden; // 隐藏二级路由中超出main高度的内容}.van-tabbar {position: relative;}
}二级路由页面高度要设置 100%
.article-page {height: 100%;.van-pull-refresh {height: 100%;.van-list {height: 100%;overflow: scroll;}}
}说明 flex: 1 在 CSS 的 Flexbox 布局中是一个简写属性用于设置 flex-grow,flex-shrink, 和 flex-basis 这三个属性的值。当你使用 flex: 1 时你实际上是在设置 flex-grow: 1表示该项可以扩大以占用额外的空间。当父容器中有剩余空间时这个元素会尝试占用这些空间。如果多个子元素都设置了 flex-grow那么它们会按照各自的 flex-grow 值比例来分配这些空间。 flex-shrink: 1表示该项可以缩小以避免父容器溢出。当父容器空间不足时这个元素会缩小以适应。如果多个子元素都设置了 flex-shrink那么它们会按照各自的 flex-shrink 值比例来缩小。 flex-basis: 0%默认情况因为在简写中如果没有明确指定则采用默认值表示该项的原始大小是0%。 但是由于设置了 flex-grow所以实际的大小会根据父容器的大小和其他子元素的 flex-grow 值来决定。 在 .layout 样式中.main 类应用了 flex: 1。这意味着 .main 元素在垂直方向由于 flex-direction: column;上会尽可能地填充剩余空间。
