Question

所以我有这个页面，背景图片，填满了100％的页面。问题是现在我的滚动不起作用，这会在小屏幕上出现问题，因为用户无法查看页面底部的内容。

CSS代码：

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#background{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}

#css{
position: absolute;
z-index: 2;
top:5%;
left: 1%;
right: 1%;
overflow: auto;
height: 100%;
line-height:1.5;
}

HTML CODE

<body>
<div>
    <img id="background" src="background.png" />
</div>

<div id="css">
<center>
<img src="logo.png"><br><br>

TEXT LINE 1<br>
TEXT LINE 2<br>
TEXT LINE 3<br>
TEXT LINE 4<br>

</center>
</div>
</body>

Answer 1

您已使用overflow: hidden;和html body。

所以你不能滚动！

Answer 2

从overflow:hidden css中删除html,body并添加以下内容

body
{
    background: url('background.png') no-repeat;
}

Answer 3

您正在使用CSS中的overflow: hidden设置。

根据W3C，使用此设置时：

剪辑溢出，其余内容将不可见

这也意味着您不仅不会看到滚动条，因为浏览器也不允许您滚动该元素。

因此，您的问题的答案是：只需删除该CSS规则。

Answer 4

<div>
    <img id="background" src="background.png" />
</div>

这应该进入后台。在css body{background: url('background.png') no-repeat;}等等。

Answer 5

您必须在CSS中设置背景而不是在html中。设置这样的背景：

body{
background: url('background.png');
}

您还可以使用重复和尺寸选项：

background-repeat: no-repeat;
background-size: cover;

我在这里使用了背景颜色：

JSFIDDLE

滚动不起作用

5 个答案: