Question

我试图在一个页面上创建一个网站，页面的每个部分都占用用户屏幕的大小（使用backstrech作为背景）。像这样：http://projects.lukehaas.me/scrollify/#home

当用户的屏幕高度太小而无法包含我的网页内容时，就会出现问题。在这种情况下，我希望我的背景比用户的屏幕更多，因为它必须填满整个内容的背景。

所以，我一直在使用overflow：scroll，它可以解决整个问题除了以显示恼人的水平滚动条，即使不需要它也是如此。我的意思是，即使在没有溢出的情况下全屏显示，也会出现水平滚动条

这是我的代码：

section#page1 {
    background: url('../img/background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    overflow: scroll; }

Answer 1

试试这个：

Answer 2

section#page1 {
   background: url('../img/background.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100vh;
   overflow: auto;
}

溢出时显示不必要的水平滚动条：滚动

2 个答案: