width: 100%; height: 100%;的问题

在CSS中，如果我把.content的宽度设置为100%，如下代码所示，

.content
{
width: 100%;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}

则背景图片显示不完整，浏览器窗口没有水平滚动条，显示效果如下图所示。

如果我把.content的宽度设置为1900px，

.content
{
width: 1900px;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}

则背景图片显示完整，并且浏览器窗口有水平滚动条，显示效果如下图所示。

这是为什么呢？我的显示器分辨率是1920×1080。

我使用的图片mooc.jpg，大小是1900×4040（经过自己的修改）。

我的代码如下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>4-1-示例</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }

            html,
            body
            {
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }

            .content
            {
                /*width: 100%;*/
                width: 1900px;
                height: 4040px;
                background: url("../images/mooc.png") center no-repeat;
            }

            .opacity
            {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: url("../images/opacity.png");
            }

            .login
            {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 360px;
                height: 360px;
                background: url("../images/login.png") no-repeat;
            }
        </style>
   </head>

   <body>
      <div class="content"></div>
      <div class="opacity"></div>
      <div class="login"></div>
   </body>

</html>

我学习太差被关起来了 2019-06-11

源自：CSS定位（position） 4-1 定位和边距的区别以及弹出层的简单实例

收起

1回答

好帮手慕码 2019-06-11 15:17:28

同学你好！

（1）当设置content宽度为100%时候，自适应浏览器宽度没有滚动条，而且图片会全部显示出来：

（2）这里测试：当content宽度设置1900的时候是没有滚动条的

这里跟同学的显示效果不同可能是因为同学电脑的分辨率问题，之后如果用到的话设置宽度为100%就可以了~

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

提问者我学习太差被关起来了 #1

content设置为width:100%; 在我的显示器上，背景图片不能完整显示，不知道为什么。

2019-06-11 16:01:11
好帮手慕码回复提问者我学习太差被关起来了 #2

同学你好！这个问题在另一个问题中回复同学了哦，同学可以看一下 https://class.imooc.com/course/qadetail/124544 祝学习愉快，望采纳祝学习愉快~

2019-06-11 18:05:01
提问者我学习太差被关起来了回复好帮手慕码 #3

我发现问题所在了，设置content宽度为100%时，【1】对该HTML文件，右键→打开方式，选择Chrome、Edge和IE浏览器，显示效果都是：背景图片完整显示，没有问题。【2】但是通过IDEA里打开Chrome，显示效果却是“背景图片不完整”。看来代码没问题，是IDEA的锅。

2019-06-12 18:17:05