一、bug描述

下图为正常情况，一个网页主体宽度为1280px。

当缩小浏览器宽度，出现滚动条时，效果如下，右侧出现空白，导致内容显示不全。

二、bug重现和解决

1、代码如下

body中有一个灰色背景的div，div中嵌套一个有固定宽度1280px的p标签。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div style="background: #eee;">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字<p style="background-color: red;width: 1280px;">1280px宽的的p标签</p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

正常显示

缩放浏览器出现滚动条时，

2、问题分析

div默认的宽度是100%，这样可以自适应。body的宽度也是100%，以html标签宽度为参考，而html宽度随着浏览器缩放增大或减小。

上面浏览器显示不全的原因是，当浏览器宽度变小出现滚动条时，div宽度仍然根据浏览器宽度自适应，而p标签宽度固定而且超出浏览器宽度，所以出现空白。

3、解决方法

设置body的最小宽度为p标签的宽度即可。真实问题解决办法同理。真实环境中大的宽度通常是由于设置固定宽度元素浮动形成的一个大的宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>body{min-width: 1280px;}
</style>
<body><div style="background: #eee;">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字<p style="background-color: red;width: 1280px;">1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签1280px宽的的p标签</p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

4、总结

虽然是小问题，但是平时开发还是必须注意。因为很多线上的页面有这样的问题。比如csdn

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5197510.html有问题欢迎与我讨论，共同进步。

网页部分内容显示不全相关推荐

关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) 参考文章: (1)关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) (2)https://www.cnblogs.com/th ...
html 横屏内容显示不全_为什么我的文本显示不全？
在实际工作中,经常会遇到文本显示不全的情况,比如表格里的文本显示不全等情况,你一般是怎么操作呢?本期与大家分享几种常见的原因. 1.Word表格文本显示不全如下图所示,表格里面的文本显示不全,这时该 ...
超简单调整Fedora25遇到的字体小问题——字体渲染问题和输入框内容显示不全...
第一个问题:字体渲染抗锯齿效果很不舒服.如图: 锯齿很明显.解决方法,使用gnome-tweak-tool(中文名:优化工具)如果没有,请安装: dnf install -y gnome-tweak ...
计算机word文档无法预览,电脑打开Word文档内容显示不全或显示空白怎么解决
很多用户会在电脑中使用必装的Microsoft Office系列软件.有用户在电脑中打开Word文档,发现内容显示不全,有时候显示空白,那么应该怎么解决这一问题?对此,大家可以参考本教程提供的方法. ...
echarty轴自定义显示不全,ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全主要代码如下:xAxis中的name为"时长(min)",但上图只显示了"时" grid: { left: '3%', r ...
打开网页报错：net::ERR_CONTENT_LENGTH_MISMATCH，网页打开时显示不全，需要刷新几次才行
打开网页报错:net::ERR_CONTENT_LENGTH_MISMATCH,网页打开时显示不全,需要刷新几次才行. 检查nginx配置无问题.(网上有其他解决方案:ngnix的缓存目录proxy_ ...
ie兼容性问题：页面内容显示不全，但不会出现滚动条
/* 页面内容显示不全,但不会出现滚动条*/html {overflow-y: scroll; }:root {overflow-y: auto;overflow-x: hidden; }:root ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
计算机word显示不全,win7系统电脑打开Word文档内容显示不全或显示空白的解决方法...
很多小伙伴都遇到过win7系统电脑打开Word文档内容显示不全或显示空白的困惑吧,一些朋友看过网上零散的win7系统电脑打开Word文档内容显示不全或显示空白的处理方法,并没有完完全全明白win7系统 ...

网页部分内容显示不全