1

だから私は、ページの 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>
4

5 に答える 5

1

CSSoverflow:hiddenから削除し、以下を追加します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

HTMLではなくCSSで背景を設定する必要があります。次のように背景を設定します。

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

繰り返しとサイズのオプションも使用できます。

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

ここでは例として背景色を使用しました。

JSFIDDLE

于 2013-05-31T10:31:52.970 に答える