Question

我有问题使我的横幅在我的网页范围内上下变得总是适合用户的屏幕，所以我没有水平滚动条，这对于手机作为台式机也是不好的体验，所以这里是代码：

<!DOCTYPE html>
<html>

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">      
      <style type="text/css">
      body {
              background-image: url("TBG_02.jpg");
              background-color: #cccccc;
              background-size: cover;
              background-repeat: no-repeat;
           }
        #top,#bottom{width:100%;}
        #top,#bottom{height:155px;}
        #top{position: fixed;left:0;top:0;}
        #bottom{position: fixed;right:0;bottom:0;}
        .topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
        .bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
      </style>
</head>

<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>   
</body>

这就是问题的样子： https://imgur.com/a/WscYr3D - 你可能会注意到照片中的灰色/白色空间不好...... 要注意：我会在横幅上方添加一些图像作为按钮，任何想法？

Answer 1

您使用的方法基本上是合理的：

background-size: cover;

确保浏览器调整图片大小以覆盖整个<body>。

您缺少的是身体的高度不会覆盖视口的整个高度。

要解决此问题，您可以添加：

body {min-height: 100vh;}

ie。 身体的高度绝不能小于视口高度的100％（或100 视口高度单位）。

工作示例：

＆＃13;

body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
         
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}

.top{
top: 0;
left: 0;
}

.bottom{
bottom: 0;
right: 0;
}

＆＃13;

<div class="top"></div>
<div class="bottom"></div>

＆＃13;

Answer 2

你的答案很酷，但是它造成了一些麻烦，所以你的答案唯一遗漏的是没有图像放在div中，所以它们可以出现在横幅上，然后我必须设置它们的宽度和高度，然后玩他们有点直到它修好：D

<body>
  <div class="top">
    <img src="BG_02.png" class="top"/>
  </div<
</body>

制作横幅缩小规模

2 个答案: