1

HTML と CSS を学習するために小さな Web サイトを作成していますが、コンテンツを任意の方向にスクロールするのに問題があります。

スクロールを許可する代わりに、ブラウザー ウィンドウのサイズがコンテンツのいずれかが収まらないポイントに変更されると、ウィンドウが消えてしまいます。ログイン ボタンの div は、左から 950px に表示されるはずです。ブラウザ ウィンドウがそれより小さい場合は、スクロールできるということですね。

また、ニュース ボックスには、ブラウザー ウィンドウの下部に到達するまで、書き込まれたコンテンツが表示されます。その後、スクロールまたは表示されません。

助言がありますか？

HTML はこちら、CSS はこちらです。

4

1 に答える 1

5

CSS には多くのposition:fixed属性があります。オブジェクトpositionが に設定されfixedている場合、スクロールしても静止したままになります。そのため、動けるものがなく、スクロールできませんでした。CSS を次のように変更してみてください。

body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }

#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}

#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}

#boxes {
margin-top: 100px;
margin-left: 100px;
}

#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}

これにより、ブラウザのサイズがすべてのコンテンツを表示できないポイントに変更されたときにページをスクロールできるようになったことを除いて、すべてが元の位置に保持されます。

于 2012-07-11T01:19:53.670 に答える