0
点赞
收藏
分享

微信扫一扫

box-sizing不生效的问题 与 底部固定结构上面滚动结构打造


Page{
width: 100%;
height: 100%;
}
.root{

padding: 20rpx;
display: flex;
height: 100%;
box-sizing: border-box;
flex-direction:column;
align-items: center;
}
.top{
width:100%;
flex: 1;
display: flex;
flex-direction:column;
align-items: center;


}

.my-box .block {
width: 49.6%;
padding-top: 40rpx;
padding-bottom: 40rpx;
min-height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
.image{
width:100%;
display: flex;
background: #f00;
border-radius:20rpx;

height: 50vw;
}

wxml

<view class="root">
<view style="flex:1;height:100%;" class="top" >
<image class="image">{{image}} </image>
<view>当前金额:{{money}}</view>
</view>


<button class="button" type="primary" bindtap='onSubmit' style='width:100%'>购买并赠送</button>

</view>

这里要生效就必须设置宽度100%否则都行不通,这样就可以打造类似安卓这样的布局了。也就是padding算在里面。

bug

在scroll-view 作为top布局的时候,里面的width:100%没卵用了,宽度被压扁,
原因 貌似是top scrollview属性里面不能加上​​​align-items: center;​​删除就又正常了。

举报

相关推荐

0 条评论