问题描述

响应式网页缩放时出现右侧空白

原因：子元素宽度撑开页面
通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题

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

内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白

此时.blank定宽700px，撑开body使整体观感右侧有空白
不换行元素宽度过长

虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果<p> <h1~6>等标签元素溢出也会产生空白
包括所有不换行属性

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到最大宽制成折叠导航栏

解决HTML页面右侧空白问题相关推荐

Android解决ViewPager页面滑动空白bug和图片点击bug
本demo 实现以下功能 1.页面数=1时,页面静止; 2.页面数=>2时,页面滑动不会产生空白基本思路当图片数量为1的时候,不让滑动, 当图片数量为2的时候,按原图片顺序再依次添加,图片数 ...
easyui datagrid列表右侧空白解决办法
easyui提供的datagrid控件,默认情况下,即使列表宽度设置成100%,右侧仍然会有一个空白,如下所示: <!doctype html> <html> <head ...
vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题 V ue项目运行npm run build后会生成一 dist文件夹 ...
vue 打开html流_解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最 ...
nginx+php-fpm页面显示空白的解决方法
nginx+php-fpm页面显示空白的解决方法参考文章: (1)nginx+php-fpm页面显示空白的解决方法 (2)https://www.cnblogs.com/mafeng/p/80037 ...
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
Excel 页面打开空白，解决的配置方法
Excel 页面打开空白,解决的配置方法 1.打开一个Excel之后发现页面空白,需要按照一下步骤修改配置 2.左下角搜索框输入注册表编辑器,打开注册表编辑器之后,看到如下下界面 3.安装一下路径HK ...
Vue通过build打包后打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

解决HTML页面右侧空白问题

文章目录

问题描述

解决办法

解决HTML页面右侧空白问题相关推荐

最新文章

热门文章