Question

我在CSS中有一个脚本。在具有高分辨率的计算机上，我对此脚本没有任何问题。但是，屏幕分辨率为1024 x 768或更小的用户在使用html页面时会遇到问题。该脚本显示50％的页面，用户无法滚动查看页面的其他50％。

如何解决此问题

这是我在CSS中的代码：

#contact2 {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: black;
  background :url(../images/contact-bg.jpg);
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contact-us2 {
  padding-bottom: 90px; 
}

我尝试添加overflow: scroll;元素，但这只显示了滚动条。滚动仍然被禁用。

Answer 1

您应该在css文件的末尾定义一个特定的样式部分，如下所示

@media only screen and (max-width: 1024px) {
    /* put here specific css for mobile */
    #contact2 {
        position: relative
        overflow:auto;
    }

    #contact-us2 {
    }
}

Answer 2

我试图添加一个溢出：滚动;元素，但这只显示滚动条

这是因为内容可以放在＆＃34; contact2＆＃34; div并且不需要滚动。

第二个问题是您没有为您的div设置max-height和max-width属性。什么＆＃39; min-height＆＃39;它确定了div应该具有的高度，即使其中没有内容也是如此。但如果内容不适合div内部，则不会阻止div调整大小，这就是overflow: scroll无法正常工作的原因。

最好的解决方案是移除最小高度＆＃39;和＆＃39; min-width＆＃39;从您的代码中输入width和height：

#contact2 {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: black;
  background :url(../images/contact-bg.jpg);
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contact-us2 {
  padding-bottom: 90px; 
}

如果您不希望在内容适合div内部时显示滚动条，并且无需滚动，则可以使用媒体查询。

https://www.w3.org/TR/css3-mediaqueries/

我希望这会对你有所帮助。请随时在下面发表评论，我会看到我能做些什么。

启用滚动

2 个答案: