1

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

代码：

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;
}

代码

<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>
4

5 回答 5

3

您已经使用 :overflow: hidden;为您的htmland body。

所以你将无法滚动！

于 2013-05-31T10:30:03.527 回答
1

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

body
{
    background: url('background.png') no-repeat;
}
于 2013-05-31T10:36:09.487 回答
1

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

根据W3C，使用此设置时：

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

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

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

于 2013-05-31T14:48:35.817 回答
0 
<div>
    <img id="background" src="background.png" />
</div>

这应该进入背景。在CSSbody{background: url('background.png') no-repeat;}等。

于 2013-05-31T10:30:38.650 回答
0

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

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

您还可以使用重复和大小选项：

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

我在这里使用背景颜色作为示例：

JSFIDDLE

于 2013-05-31T10:31:52.970 回答