Как я могу сделать div с высотой 100% на css?

Question

Helllo guys! Я хочу сделать свое левое меню со 100% высоты.

На правой стороне будет область содержимого и нижний колонтитул с правой стороны.

Я хочу, чтобы меню lightblue слева дошло до нижней части страницы.

Проверить это JSFiddle http://jsfiddle.net/mYw72/

Или этот код!

 <div id="container"> 
     <div id="top"> 
      <div id="logo"></div> 
      <div id="user-tools"> 
       <a href="#">Help</a> 
       <span>&nbsp;|&nbsp;</span> 
       <a href="#">Contact us</a> 
      </div> 
     </div> 

     <div id="sidebar"> 
      <ul> 
       <li><a href="#">Company</a></li> 
       <li><a href="">Administrator</a></li> 
       <li><a href="#">App</a></li> 
       <li><a href="#">Configuration</a></li> 
       <li><a href="#">Statistics</a></li> 
       <li><a href="#">Monitor</a></li> 
       <li><a href="#">Preference</a></li> 
      </ul> 
     </div> 
     <div id="rightSide"> 
      <div id="content"> 
       Content. 
      </div> 

      <div id="bottom1"> 
       <div id="line-bottom"></div> 
       <div id="text-bottom">Copyright 2012 <span>ME</span>, Inc. All Rights Reserved</div> 
      </div> 
     </div> 
    </div> 

устанавливаемое сотовое что-то вроде этого

html { 
padding:0px; 
margin:0px; 
} 

body { 
background-color: #ECEDEF; 
font-family: Verdana, Tahoma, Sans-Serif; 
color:#564b47; 
padding:0px; 
margin:0px; 
} 

#top { 
background-image: url('../img/top.png'); 
background-repeat: repeat-x; 
width: 100%; 
height: 96px; 
} 

#rightSide{ 
overflow: hidden; 
} 

#sidebar{ 
position: relative; 
background:lightblue; 
border-right:1.7px solid #FFFFFF; 
min-height: 100%; 
line-height: 100%; 
float: left; 
height: 100%; 
margin-top: -5px; 
} 

#sidebar ul li { 
list-style-type: square; 
list-style-position: inside; 
width:209px; 
height:100%; 
margin-top:15px;  
} 
#sidebar ul li a{ 
list-style-position: inside; 
display: block; 
color:#3C3C3C; 
text-decoration:none; 
font-size:13px; 
font-weight:bold; 
padding:10px 20px 10px 40px; 

} 
#sidebar ul li a:hover { 
color:#7da536; 
width:209px; 
border-right: 1.7px solid #ECEDEF; 
background: #ECEDEF; 
} 
#sidebar ul li a:active{ 
background: #ECEDEF; 
border-top: 1.7px solid #D8D9DB; 
border-bottom: 1.7px solid #FFF; 
border-right: 1.7px solid #FFF; 
width:149px; 

} 

#content{ 
margin-left: 10px; 

} 

#bottom { 
position: absolute; 
bottom: 0; 
background-color: #ECEDEF; 
width: 100%; 
padding: 53px 0 0 0; 
} 

#bottom1 { 
position: absolute; 
bottom: 0; 
/*background-color: #ECEDEF;*/ 
background-color: greenyellow; 
/* width: 85.3%;*/ 
width: 100%; 
padding: 53px 0 0 0; 

/* margin-left: 211px;*/ 
} 

Answer 1

html, body, #container { height: 100% } 

Answer 2

Вы можете установить высоту левой панели на 100% после того, как все вещах он находится внутри, также устанавливается на высоту 100% ,

Пример CSS:

html, body, #container{height:100%} 
#sidebar{height:100%;}