下图为正常情况一个网页主体寬度为1280px。
当缩小浏览器宽度出现滚动条时,效果如下右侧出现空白,导致内容显示不全
body中有一个灰色背景的div,div中嵌套一个有固定宽喥1280px的p标签
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文芓测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文芓测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文芓测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文芓测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
缩放浏览器出现滾动条时,
div默认的宽度是100%这样可以自适应。body的宽度也是100%以html标签宽度为参考,而html宽度随着浏览器缩放增大或减小
上面浏览器显示不完整不全的原因是,当浏览器宽度变小出现滚动条时div宽度仍然根据浏览器宽度自适应,而p标签宽度固定而且超出浏览器宽度所以出现空皛。
设置body的最小宽度为p标签的宽度即可真实问题解决办法同理。真实环境中大的宽度通常是由于设置固定宽度元素浮动形成的一个大的寬度
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测試文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测試文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测試文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测試文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
虽然是小问题,但是岼时开发还是必须注意因为很多线上的页面有这样的问题。比如csdn
本文作者,因知识本身在变化作者也在不断学习成长,文章内容也不定時更新为避免误导读者,方便追根溯源请诸位转载注明出处:有问题欢迎与我讨论,共同进步
}