移动端布局,宽度扩大三倍,高度为什么也扩大三倍

问题:

在做移动端布局时,横屏状态下,想实现一个水平宽度是页面视口宽度3倍的铺底div,现在在将宽度扩大后,高度也随之扩大了3倍。这是为什么呢?

代码

html
<body>
    <div class="wrap"></div>
</body>
html, body {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 300%;
    height: 100%;
    background: rgba(222, 123, 32, 0.4);
}
阅读 2.6k
4 个回答

可以从max-height属性解决问题
把最大高度设为一个绝对值,而不是百分比单位

并不会吧,你代码贴全了?

是不是还有内容元素,造成这样了?可以考虑使用vwvh这样的单位

100%
    300%
        900%

贴出来的代码是不会造成高度变成三倍的,另外移动端不推荐用百分比,我个人认为rem做单位更好一些

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题