匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

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


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

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/22 02:48:03
  • 終了:2013/08/29 02:50:03

回答(2件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/08/22 10:42:04

各要素に対して
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>
2013/08/22 11:18:21
匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/08/25 14:05:06

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません