滾動不起作用

所以我有這個頁面，有背景圖片，填滿了頁面的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代碼

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

來源

2013-05-31 Spotify Bruger

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

所以你不能夠滾動！

來源

2013-05-31 10:30:03 Faridzs

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

這應該進入後臺。在css body{background: url('background.png') no-repeat;}等等。

來源

2013-05-31 10:30:38

您必須在CSS中設置背景而不是在html中。設置這樣一個背景：

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

您還可以使用重複和大小選項：

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

我用了背景色爲這裏的例子：

JSFIDDLE

來源

2013-05-31 10:31:52

刪除overflow:hidden從您的html,body css中添加以下內容

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

來源

2013-05-31 10:36:09 Pooshonk

您在CSS中使用了overflow: hidden設置。

按照W3C，使用此功能時：

溢出被剪裁，並對其內容的其餘部分將是無形的

這也意味着你不但看不到滾動條，因爲瀏覽器也不允許你滾動該元素。

所以你的問題的答案是：只需刪除該CSS規則。

來源

2013-05-31 14:48:35 Joum

滾動不起作用

回答

相關問題