CSS - min-heightの作業ができない

私は本当に簡単なWebページを作ろうとしています。どれくらいのコンテンツがあるにせよ、赤色の背景にあるウェブページの上端から下端まで一貫して伸びる、緑色の1000ピクセルの長方形である必要があります。CSS - min-heightの作業ができない

私はこれを動作させることはできません。 min-heightを使用すると（下のように）、十分なコンテンツがない場合、緑色の領域はページの一番下まで伸びません。私がheightに置き換えた場合、コンテンツが多い場合、コンテンツは緑色の領域をオーバーフローします。ここで

は私のHTMLです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="stylesheet.css" /> 
    </head> 
    <body> 
     <div id="container"> 
      content here. 
     </div> 
    </body> 
</html>

ここでCSSです：

html { 
    height: 100%; 
} 

body { 
    background-color: #F00; 
    margin: 0; 
    min-height: 100%; 
} 

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

私は、これはより多くのdiv秒で実現可能である知っているが、それは本当にHTMLを変更せずに動作するはずです。これをどうすれば解決できますか？

ところで、私はSafariを利用しています。私は、標準を尊重しないブラウザとの互換性については気にしません。

出典

2011-07-23 ryyst

http://stackoverflow.com/questions/485827/css-100-height-with-padding-marginは役に立ちますか？ – andyb

ワーキングサンプルです：詳細については

<!doctype html> 
<html> 
<head> 
    <title>Container sample</title> 
    <style> 
     html, body 
     { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      background: red; 
     } 
     #container 
     { 
      background: green; 
      width: 1000px; 
      min-height: 100%; 
      margin: 0 auto 0 auto; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     Container sample 
    </div> 
</body> 
</html>

同様のquestionにmy answerを見てみましょう。

出典

2011-07-23 20:15:50 knut

あなたの要件にプロパティposition absoluteを使用することができます。それはあなたが

#container { 
    background-color: #0F0; 
    width: 1000px; 
    margin: 0 auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:50%; 
    margin-left:-500px; 
}

出典

2011-07-23 09:39:54

残念ながら、緑色の領域が中央に配置されなくなります。 – ryyst

ryyst ------今すぐ表示：P –

あなたtopと#containerposition:absolute;と0からbottomセットを与えるのを助けることがあります。ここで

#container { 
    background-color: #0F0; 
    width: 1000px; 
    margin: 0 auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
}

http://jsfiddle.net/jasongennaro/4ZLcD/

出典

2011-07-23 20:06:56

CSS - min-heightの作業ができない

答えて

関連する問題