美文网首页
通栏窗口缩小后背景颜色显示不全

通栏窗口缩小后背景颜色显示不全

作者: 路人_Ding | 来源:发表于2018-08-28 16:05 被阅读0次

相信很多人在写页面的时候遇到过这样的一种问题,外层div(设置背景色,宽度为100%)是通栏的,内部设置一个页面的主体部分内容,这个时候如果我们将浏览器窗口缩小的时候,这时候右侧超出当前浏览器窗口大小的部分就会失去了我们给外层设置的背景色。如下图所示,这是为什么呢??

image.png

解析:
这是因为外层div设置的100%是相对于当前文档所言的,也就是浏览器的窗口大小,现在我们假设当前浏览器窗口是1000px,而主体内容部分是1200px,那么,当我们把浏览器窗口缩放到1000px时,也就是外层的div实际上只有1000px了,而我们的背景色是对外层div进行设置的,这样就会出现上述图片的问题。

解决:
其实解决方法很简单,只要我们给外层的div增加一个min-width: 1200px;就可以了。

原因:
这是因为如果我们不设置了最小宽度,那么当外层的div缩放到1000px的时候,内层的div仍然是1200px,但是我们的css只设置了外层div的北京颜色,因此只有外层的部分显示背景色,而当我们拖动滚动条的时候右侧的背景色就没有了。

相关文章

  • 通栏窗口缩小后背景颜色显示不全

    相信很多人在写页面的时候遇到过这样的一种问题,外层div(设置背景色,宽度为100%)是通栏的,内部设置一个页面的...

  • 常用的linux命令的基本使用(一)

    小技巧:ctrl + shift + = 放大终端窗口的字体显示ctrl + - 缩小终端窗口的字体显示 linu...

  • 常用 Linux 命令的基本使用

    小技巧ctrl + shift + = 放大终端窗口的字体显示ctrl + - 缩小终端窗口的字体显示 自动补全 ...

  • 10 Pygame

    创建窗口 1.初始化pygame 2.创建游戏窗口 3.游戏循环 显示文字 设置窗口的背景颜色 1.创建字体对象 ...

  • 背景图相关

    1. 设背景图div一定要指定宽高,否则图片不显示 2. 缩小拉大窗口时背景图片也跟着缩放 3. 背景图不重复: ...

  • Linux常用命令

    小技巧ctrl + shift + = 放大终端窗口的字体显示ctrl + - 缩小终端窗口的字体显示一部分参考了...

  • 037 Python语法之pywin32

    窗口显示隐藏 窗口放大缩小 MessageBox():系统弹框 MessageBox函数详解 参数1代表系统,暂时...

  • IOS15之UINavigationBar背景颜色不全

    IOS15之UINavigationBar背景颜色不全 系统升级到ios 15之后,背景颜色,或者背景图片必须滚动...

  • PyCharm 修改窗口背景颜色

    打开PyCharm软件。我们可以看到默认窗口颜色是白色的。就是这样: 点击菜单栏左上角【File】,选择【Sett...

  • Material 主题下Button的大小问题

    前端给了一些设计图,包括大小,字体颜色,背景颜色,字体大小;看起来挺合理的,但是实际上总是会出现显示不全:布局文件...

网友评论

      本文标题:通栏窗口缩小后背景颜色显示不全

      本文链接:https://www.haomeiwen.com/subject/dghqwftx.html