CSS - 無法獲取最小高度的工作

我正在嘗試製作一個非常簡單的網頁。它應該是一個1000px寬的綠色，居中的矩形，從紅色背景上的網頁頂部一直延伸到底部，無論內容有多少。CSS - 無法獲取最小高度的工作

雖然我不能得到這個工作。如果我使用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>

欲瞭解更多信息，看看my answer到類似question。

來源

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 –

給你一個#container與position:absolute;和top一套bottom對0。

#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 - 無法獲取最小高度的工作

回答

相關問題