具有最小高度的動態內容高度

我正在寫一個瀏覽器遊戲來改善我的web技能，但我被困在佈局問題中。我的遊戲頁面包含一個標題，內容和一個帶有兩個間隔符的頁腳，其間有一個backgroundImage。內容div應垂直拉伸，以便使用視圖的整個空間。如果內容比瀏覽器更高，則應該使用滾動條進一步拉伸。它的重要性在於高度是正確的，因爲我使用漸變填充作爲背景，並且不應該在某個點重複。我認爲我可以通過身高來實現這個目標：對於大尺寸和最小高度的內容，auto：對於小尺寸內容的100％。但這不起作用。我讀了幾個論壇帖子，但沒有任何工作。請問你能幫幫我嗎？我的推理錯誤嗎？具有最小高度的動態內容高度

HTML：（的用於特大型頁面的BR）

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="mycss.css"> 
</head> 
<body> 
    <div class="center"> 
    <div class="header"> 
     Header 
    </div> 
    <div class="spacer"></div> 
    <div class="main"> 
     Content 
     <!--<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>--> 
    </div> 
    <div class="spacer"></div> 
    <div class="footer"> 
     Footer 
    </div> 
    </div> 
</body> 
</html>

CSS：

html,body { 
    margin:0px; 
    padding:0px; 
    height: auto; 
    min-height: 100%; 
} 

body { 

    background: rgb(122,188,255); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0); /* IE6-9 */ 

} 

.center { 
    height: auto; 
    min-height: 100%; 

    width:1024px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:left; 

    box-shadow: 0px 0px 20px 0px #000; 

    background: rgb(181,189,200); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(117,117,117,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5bdc8', endColorstr='#757575',GradientType=0); /* IE6-9 */ 

} 

.spacer{ 
    min-height:16px; 
    background-image: url(Absperrband.png); 
    background-repeat: repeat; 
    -webkit-box-shadow: 0px 0px 5px 0px #000; 
      box-shadow: 0px 0px 5px 0px #000; 
} 

.header { 
    padding : 8px; 
    height:70px; 
} 

.main{ 
    min-height: 100%; 
    padding : 12px; 
} 

.footer{ 
    padding : 12px; 
}

來源

2012-10-30 Gnietschow