人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML&CSSに関する質問です。

ヘッダーがあり、その下に左側にメニュー、右側に本文がある構成のサイトを作りたいです。

左側のメニューの内容が少ないのですが、高さ100%のボックスとして設定(heightやmin-heightで設定)しました。そうすると、縦のスクロールバーが表示されてしまいます。

ヘッダーの高さ分無駄になっているのでスクロールバーが表示されているのだと思います。

どうすればスクロールバーがでないまま、高さを100%にできますか?

●質問者: 匿名質問者
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 匿名回答1号

各要素に対して
overflow:hidden;(必ず非表示…枠の大きさ優先)を使用してはいかがでしょう?
他にも
overflow:auto;(必要になれば表示)
overflow:scroll;(必ず表示)
overflow:visible;(必ず非表示…内容優先)

スクロールしない範囲に入っているということであればhiddenでもvisibleだとしても変化はないと思いますが、一度使用してみて下さい。
以下、参考ページです。
オーバーフローに関するスタイルシート属性


匿名質問者さんのコメント
例えば、以下のようなHTMLですと、縦スクロールバーが表示されます。 原因はヘッダー部分が高さ100pxあるにも関わらず、その下のコンテンツが100%の高さに設定されているので、全体ではヘッダー分の高さが不足しスクロールバーが表示されてしまいます。 この場合、「overflow:hidden」をbody句に設定すると確かにスクロールバーは消えるのですが、その場合は、本当に内容が増えた場合も当然表示されない状況になってしまいます。 「overflow:hidden」以外の方法ではこのようなケースではスクロールバーを消すのは難しいのでしょうか。 >|| <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <style> body, html { margin: 0; padding: 0; height: 100%; background-color: red; } div#wrapper { height: 100%; background-color: blue; } div#header { height: 100px; background-color: green; } div#body { height: 100%; background-color: yellow; } </style> </head> <body> <div id="wrapper"> <div id="header">ヘッダー</div> <div id="body">コンテンツ</div> </div> </body> </html> ||<

2 ● 匿名回答2号

ちょっとスマートなやり方が思いつきませんでしたので、z-indexを使っています。
http://jsfiddle.net/kqymf/1/

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ