みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スタイルシートでスクロールは可能ですか?

以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。
<scroll=内容を切り抜く>ということから当然のことなのでしょうか?
<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
<br/>
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

投稿日時 - 2005-12-28 13:19:55

QNo.1863932

困ってます

質問者が選んだベストアンサー

スクロールしますよ。
変更点はheightの追加とscrollをautoに。
overflowはボックスに入りきらないときの処理なので、heightで高さを指定しないと自動的に伸びていってしまいます。
また、はみ出さない場合はスクロールバーが表示されません。
scrollを指定すると縦横のスクロールバーが出ますが、autoは縦だけです。
横は通常スクロールせず、文章は折り返しになります。
(スクロールする方法もあるかもしれませんがそこまでわかりません)

ついでに、スタイルシートの記述部分の先頭にスペースが入っていると、Firefoxで正しく表示されませんので、左詰にしてあります。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Test</title>  
<style type="text/css">
#left {
position:absolute;
top: 130px;
left: 100px;
width:300px;
height:100px;
overflow:auto;
border: 1px solid #CCC;
}
#main {
position:absolute;
top: 130px;
left: 400px;
}
#right {
position:absolute;
top: 130px;
left: 700px;
}
#footer {
position:absolute;
bottom: 0px;
left: 100px;
}
</style>
</head><body>
<div id="left">  left<br/>
<br/>
left left left left left left left left left left left left left left left left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
left<br/>
</div>
<div id="main">  main </div>
<div id="right">  right </div>
<div id="footer">  footer </div>
</body>
</html>

投稿日時 - 2005-12-29 11:11:16

お礼

色々と試しましたが、はみ出す量との関係もありそうですね!
どうしても、「スクロールさせたい」との質問に不可と答えたのですが納得されないもので確認の質問をした次第です。高さを指定してスクロールバーを出しても、はみ出し部分を見れないので実用的ではありませんね!その後、調査した範囲では「ブラウザのサポート状況は不完全というのが実情」というのが私の結論です。

投稿日時 - 2005-12-29 18:57:13

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問