CSSで、height:100%の中央寄せ

解決済

質問者：django13
質問日時：2009/10/17 09:50
回答数：6件

白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。
本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、

html, body, containerのそれぞれにheight:100%、
親要素にmargin, padding 0を指定したところ、
画面をスクロールさせたところから緑色の背景色が消えています。

どのようにすれば解決できるのでしょうか？

*{
margin:0;
padding:0;
}

html, body{height:100%;}

#container {
height:100%;
width:800px;
background-color:#0A0;
margin:0px auto;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： think49
回答日時：2009/10/22 23:41

#4 で既に指摘が入っていますが、min-heightプロパティが常道かなと。

---
<style type="text/css">
html,body{
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
width: 800px;
background-color: #0A0;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="container">
<p>contents</p>
</div>
</body>
</html>
---

# IE用にCSSハックしてます。

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
http://blog.creamu.com/mt/2008/03/cssminheightea …

- 0
- 件

通報する

この回答へのお礼

!importantは思いつきませんでした。
これでやれば最も楽でいいですね。

通報する

お礼日時：2009/10/25 22:28

No.5

回答者： 4017B
回答日時：2009/10/20 04:43

またまた補足です。

━━Sample::Start━━━━━━━━━━━━━━━━━━━━━━━
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0 auto;
width: 800px;
text-align: center;
}
table#container {
width: 800px;
height:100%;
background-color: #0a0;
}
table#container > tr,td {
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<table id="container"><tr><td>
コンテンツ文書など～<br>
コンテンツ文書など～<br>
コンテンツ文書など～<br>
</td></tr>
</table>
</body>
</html>
━━Sample::Endd━━━━━━━━━━━━━━━━━━━━━━━━

CSSの内容を上記の様に若干書き換えて下さい。
No.3のままだと「Tridentエンジン(IE系)」の時にちゃんと表示されません。

上記の例文の様にしておけば少なくとも。
・IE
・Fire Fox
・Chrome
～の3つでは大丈夫なので問題無し？？

P.S.
＞バグ～
いやコレはバグじゃなくて仕様ですよ(笑)。
大前提としてタグやCSSも含めて「BODY要素の“背景色”にはwidthなどの幅指定が出来ない」のですから。

本来、こう言うことを実現するためには。
色指定じゃなくて“背景に画像”を指定して処理する様になっていると思われ…？まあ将来的にHTML5とかの拡張要素で、何らかの色幅指定とかが出来る様になるかも？？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
たしかにdivで色つけるのもテーブルで色つけるのも本来の目的に反している点は一緒ですね。
ひとまず画像を用いない場合はこの方法を使わせていただきます。

通報する

お礼日時：2009/10/21 22:34

No.4

回答者： freepacket
回答日時：2009/10/19 09:51

#container に min-height:100%; を指定したらどうでしょうか？

height:100%は一旦消して。

min-height に対応していないブラウザ用に何らかのハックを仕込まないといけないと思いますが...

- 0
- 件

通報する

この回答へのお礼

IE6以外であれば一番簡単ですね。
後はハックを考えないと・・・。

通報する

お礼日時：2009/10/25 22:14

No.3

回答者： 4017B
回答日時：2009/10/17 16:48

<html>

<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0 auto;
width: 800px;
}
#container {
width: 100%;
height: 100%;
background-color: #0a0;
}
#container > tr,td {
vertical-align: top;
}
</style>
</head>
<body>
<table id="container"><tr><td>
コンテンツ文書など～<br>
コンテンツ文書など～<br>
コンテンツ文書など～<br>
</td></tr>
</table>
</body>
</html>

これで見かけ上は添付画像の様になります。
基本枠をtableで組んでるので、中身の文書の長短によって左右されることはありません。

- 0
- 件

通報する

この回答へのお礼

この方法はうまくいきました。
ただせっかくCSSを使っているのにバグのせいでテーブルでレイアウトしなくてはならないのも奇妙な感じですね。

通報する

お礼日時：2009/10/19 22:17

No.2

回答者： 4017B
回答日時：2009/10/17 16:34

すいません…勘違いしてました…。

No.1の書き方だと、文書が短い時には画面の下の方まで背景色がいきませんね。間違いです。

ちょっと考えてみます。tableで処理した方が簡単かも？？

- 0
- 件

通報する

No.1

回答者： 4017B
回答日時：2009/10/17 16:17

<html>

<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0 auto;
height: 100%;
width: 800px;
}
div#container {
background-color: #0A0;
}
</style>
</head>
<body>

<div id="container">
コンテンツ文書など～
</div>

</body>
</html>

以上、こんな感じでいいかな？
後は環境に合わせて適当にアレンジして下さい。