解决HTML页面右侧空白问题

#解决HTML页面右侧空白问题| 来源: 网络整理| 查看: 265

文章目录问题描述解决办法

问题描述

响应式网页缩放时出现右侧空白在这里插入图片描述原因：子元素宽度撑开页面 通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题

测试后发现可能出现以下布局：

内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白在这里插入图片描述此时.blank定宽700px，撑开body使整体观感右侧有空白

不换行元素宽度过长在这里插入图片描述虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果

等标签元素溢出也会产生空白包括所有不换行属性

flex布局中： flex-wrap: nowrap; border-box中width:100%同时有margin 在这里插入图片描述

border-box元素.blank设置了width:100%;但同时又有margin值，总宽度已经超出了页面，产生空白解决办法 css中加入： body, html { overflow-x: hidden; }

宽度超出body的元素被直接隐藏，且没有滚动条但没有滚动条会导致页面无法缩放，影响其他元素

治标不治本，还是需要找到问题元素并调整布局

css中加入： *{ outline: solid #f00 1px !important; background: #000 !important; color: #fff !important; }

给每个元素加上边框且改变背景色，快速找到超出边界的元素（颜色醒目即可）并作出调整在这里插入图片描述比如开篇问题是导航栏未换行超出边界，可以考虑@media到最大宽制成折叠导航栏

【本文地址】

今日新闻