html/css頭和頁腳沒有填滿整個空間

Question

你好我的佈局有問題，當我調整它的大小時，它沒有填滿整個空間。請檢查出來here

我的示例代碼：

 html, body { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
     } 

     p, a, h1 { 
      font-family: "Trebuchet MS", Helvetica, sans-serif; 
     } 

     .container { 
      width: 100%; 
      min-height: 100%; 
      position: relative; 
     } 

     .content { 
      width: 96%; 
      max-width: 720px; 
      min-width: 600px; 
      margin: 0 auto; 
      padding: 10px; 
      padding-bottom: 245px; /* Height of the footer element */ 
     } 

     .headerWrapper { 
      position: absolute; 
      height: 85px; 
      background: #19A347; 
      z-index: 9000; 
      width: 100%; 
     } 

     #header { 
      width: 960px; 
      margin: 0 auto; 
      position: relative; 
     } 

     .logo { 
      position: absolute; 
     } 

     .logoimg { 
      display: block; 
      width: 155px; 
      height: 85px; 
      text-indent: -9999px; 
     } 

     .globalnav { 
      float: right; 
      clear: right; 
      padding: 8px 8px 0 0; 
      display: block; 
     } 
     .nav-menu { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
      text-align: center; 
     } 
     .nav-menu li { 
      display: inline; 
     } 
     .nav-menu a { 
      display: inline-block; 
      padding: 15px; 
      margin: 5px; 
      color: #fff; 
      font-size: 20px; 
      text-decoration: none; 
     } 

     .nav-menu a:hover { 
      color: #66C285; 
     } 


     #footer { 
      height: 245px; 
      background: #1c1c1c; 
      position: absolute; 
      bottom:0; 
      left:0; 
      width: 100%; 
     } 

     .cols-container { 
      margin: 0 auto; 
      max-width: 960px; 
      min-width: 900px; 
      overflow: hidden; 
     } 

     .cols-container div { 
      width: 20%; 
      float: left; 
      padding: 5px; 
      margin: 15px; 
     } 

     .heading { 
      font-size: 20px; 
      color: #fff; 
      background: #009933; 
      padding: 5px 0 5px 10px; 
     } 

     #footer li, a { 
      color: #fff; 
      text-decoration: none; 
     } 

     #footer a:hover { 
      color: #999; 
     }; 

我不知道發生了什麼使它像這樣。幫助是真正的讚賞。

Answer 1

，則應該更換width和headerWrapper之間header：

.headerWrapper { 
position: absolute; 
height: 85px; 
background: #19A347; 
z-index: 9000; 
width: 960px; 

} 

#header { 
width: 100%; 
margin: 0 auto; 
position: relative; 
} 

你也應該改變這些規則：

.cols-container { 
    margin: 0 auto; 
    max-width: 960px; 
    min-width: 900px; 
    overflow: hidden; 
} 

.content { 
width: 96%; 
max-width: 720px; 
min-width: 600px; 
margin: 0 auto; 
padding: 10px; 
padding-bottom: 245px; /* Height of the footer element */ 
} 

到最小寬度你想：

.cols-container { 
    margin: 0 auto; 
    max-width: 960px; 
    min-width: 400px; 
    overflow: hidden; 
} 

.content { 
width: 96%; 
max-width: 720px; 
min-width: 400px; 
margin: 0 auto; 
padding: 10px; 
padding-bottom: 245px; /* Height of the footer element */ 
} 

JSFIDDLE