100％網站內容 - 內容和邊欄

其中有一個標題，然後是一個site_content，其中包含div內容和邊欄，然後粘滯頁腳。

這裏是我的代碼：

HTML：

<!DOCTYPE HTML> 
<html> 

<head> 
    <title>Turismo Murtoseiro</title> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> 
    <link rel="stylesheet" type="text/css" href="style.css" title="style" /> 
</head> 
<body> 
<div class="wrapper"> 
    <div id="header"> 
    <div id="logo"></div> 
    <div id="menubar"> 
    <ul id="menu"> 
      <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> 
      <li class="selected"><a href="index.html">Home</a></li> 
      <li><a href="ilustracao.html">Cafés</a></li> 
      <li><a href="3d.html">Restaurantes</a></li> 
      <li><a href="video.html">Hotéis</a></li> 
      <li><a href="video.html">Pensões</a></li> 
      <li><a href="contacto.html">Contacto</a></li> 
      </ul> 
      </div> 
      </div> 
    <div id="site_content"> 
    <div id="sidebar"> 
     <!-- insert your sidebar items here --> 
     trujytkyukliyluilouiluiol </div> 
    <div id="content"> 
     <!-- insert the page content here --> 
     <h1>Pedro Fidalgo - freelancer</h1> 
    <div> 
     <p> O meu nome &eacute; Pedro Fidalgo, e estudo na &aacute;rea de Multim&eacute;dia, na escola Padre Ant&oacute;nio Morais da Fonseca, na Murtosa.</p> 

    </div> 
    </div> 
    </div> 
    <div class="push"></div> 
    </div> 
    <div id="footer" class="footer"> 
    Copyright &copy; Pedro Fidalgo 2011</div> 
</body> 
</html>

CSS：

* {margin:0; 
padding:0; 
} 

html, body {height: 100%; 
font: normal .80em 'trebuchet ms', arial, sans-serif; 
} 

p 
{ 
    padding: 0 0 20px 0; 
    line-height: 1.7em; 
    color: #666; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    background: #F0EFE2; 
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 30px; /* .push must be the same height as .footer */ 
    clear: both; 
} 


h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif; 
    color: #43423F; 
    margin: 0 0 15px 0; 
    padding: 15px 0 5px 0;} 

a, a:hover 
{ outline: none; 
    text-decoration: underline; 
    color: #A4AA04;} 

a:hover 
{ text-decoration: none;} 

.left 
{ float: left; 
    width: auto; 
    margin-right: 10px;} 

.right 
{ float: right; 
    width: auto; 
    margin-left: 10px;} 

.center 
{ display: block; 
    text-align: center; 
    margin: 20px auto;} 

blockquote 
{ margin: 20px 0; 
    padding: 10px 20px 0 20px; 
    border: 1px solid #E5E5DB; 
    background: #FFF;} 

ul 
{ padding: 2px 0 22px 17px;} 

ul li 
{ list-style-type: circle; 
    padding: 0 0 4px 5px;} 

ol 
{ padding: 8px 0 22px 20px;} 

ol li 
{ padding: 0 0 11px 0;} 

#logo, #menubar 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 



#header 
{ 
    height: 150px; 
    background-color: #708B1A; 
} 

#logo 
{ 
    width: 877px; 
    position: relative; 
    height: 100px; 
    background-color: #003; 
    background-image: url(images/logo.png); 
    background-repeat: no-repeat; 
} 


#menubar 
{ width: 877px; 
    height: 50px; 
    padding: 0; 
    background: #29415D url(images/menu.png) repeat-x;} 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li 
{ list-style: none;} 

ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    display: block; 
    float: left; 
    height: 24px; 
    padding: 20px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #1C2C3E url(images/menu_select.png) repeat-x;} 

#site_content 
{ width: 837px; 
    overflow: hidden; 
    color #000; 
    height: 100%; 
    margin: 0 auto 0 auto; 
    padding: 20px 24px 20px 37px; 
    background: #FFF url(images/content.png) repeat-y;} 


#content 
{ text-align: left; 
    width: 595px; 
    min-height: 100%; 
} 


#sidebar 
{ 
    float: right; 
    width: 200px; 
    padding-top: 0; 
    padding-right: 15px; 
    padding-bottom: 30px; 
    padding-left: 15px; 
} 


#footer 
{ width: 878px; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    height: 30px; 
    text-align: center; 
    margin: 0 auto 0 auto; 
    background: #29425E url(images/footer.png) repeat-x; 
    color: #FFF; 
}

，我不能以100％的把我的SITE_CONTENT（與內容和邊欄）..什麼是我錯過了？

來源

2013-04-10 Pedro Fidalgo

那是因爲你有837px寬？它絕不可能是100％，當你有837px寬指定 – 2013-04-10 08:25:11

請訪問以下鏈接，這可能幫助... http://stackoverflow.com/questions/11812759/css3-height-100 – mpakbaz 2013-04-10 09:07:56