收藏
回答

view的高度(height)用百分比的话加入form后view布局就变了,不用百分比就不会为什么?

view的高度如果用百分比(如20%), 外面加上<form>后布局就变了,如果高度用具体尺寸(100px)而不用百分比,外面加上form就没事。不能用百分比吗?代码框架如下(两段代码的差异就只是红色部分,别的都一样):
1、用百分比时,加入form后布局会被改变:
  <form bindsubmit="formSubmit">
  <view style="height:90%;display:flex;flex-direction:column;justify-content:center;background-color:#ffffff;">
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ff0000;">
       <text>Welcome</text>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ffff00;">
       <text>账号</text><input style="background-color:#c0c0c0;"></input>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#008000;">
       <text>密码</text><input style="background-color:#c0c0c0;"></input>
    </view>  
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#0000ff;">
       <button form-type="submit" size="default" type="primary" >Enter</button>
    </view>
  </view>
  </form>



2、用具体长度时,加入form后布局不会变:
  <form bindsubmit="formSubmit">
  <view style="height:400px;display:flex;flex-direction:column;justify-content:center;background-color:#ffffff;">
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ff0000;">
       <text>Welcome</text>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ffff00;">
       <text>账号</text><input style="background-color:#c0c0c0;"></input>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#008000;">
       <text>密码</text><input style="background-color:#c0c0c0;"></input>
    </view>  
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#0000ff;">
       <button form-type="submit" size="default" type="primary" >Enter</button>
    </view>
  </view>
  </form>


-------------------------[end]---------------------------------

回答关注问题邀请回答
收藏

3 个回答

  • Smile
    Smile
    2019-10-12

    宽高设置百分比都是相对上一级的,如果没有设置的话就会根据子元素的宽高来撑开,你外面套一层form没有设置高度所以出现了上面的问题,你把form高度设置100%或者固定的高度就可以了。

    2019-10-12
    有用 1
    回复 1
    • 英忠通信
      英忠通信
      2019-10-12
      嗯嗯设置form的height为100%就好了。非常感谢。
      2019-10-12
      回复
  • bibolibo
    bibolibo
    2019-10-12

    应该是两者之间的冲突,form 表单中的提交 button 固定了格式之类的...

    2019-10-12
    有用 1
    回复 1
  • 拾忆
    拾忆
    2019-10-12

    试试rpx或者vh

    2019-10-12
    有用 1
    回复 1
登录 后发表内容
问题标签