CSS Высота 100% с верхним и нижним колонтитулом

Question

У меня возникли трудности с достижением Css на 100%, поэтому мой сайт может выглядеть правильно в каждом веб-браузере. Я последовал за учебником, который я нашел HERE, но не повезло в его работе. У меня есть пример, содержащий нижний колонтитул. Этот нижний колонтитул также не установлен. Кроме того, я стараюсь, чтобы окружающая черная рамка закрывала нижний колонтитул. Есть ли что-то, что я делаю неправильно?

Для больше деталей, пожалуйста, смотрите на мой LIVE EXAMPLE

CSS

<style> 
html,body { 
    padding: 0px; 
    margin: 0px; 
    background: #333333; 
    background-size: 100%; 
    line-height: 130%; 
    height: 100% 
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif; 
    font-size: 90%; 
    color: #5e5e5e; 

} 

/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/ 

#colorblock { 
    position: absolute; 
    top: 60px; 
    left: 0px; 
    background: #c69a55; 
    z-index: -1; 
    height: 65px; 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
} 


/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/ 

#container { 

    z-index: 1; 
    width: 850px; 
    position: relative; 
    margin: 0 auto; 
    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 
    min-height:100%; /* real browsers */ 

    } 

#contentArea{ 

     padding:1em 1em 5em; 
     min-height:700px; 
     width: 850px; 
     position:relative; 
     background: #f2f2f2; 
     border-right: 15px solid #000000; 
     border-left: 15px solid #000000; 
     position: relative; 

}  

/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/ 

#header { 
    width: 100%; 
    height: 180px; 
} 



/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/ 

#clear { 
    clear: both; 
    margin-bottom: 10px; 
} 

#addSpace{ 
    padding-bottom:7px; 
} 


.bottomNav { 
    margin-right:auto; 
    margin-left:auto; 
    width:880px; 
    height: 200px; 
    background: #7a7a7a; 


} 

#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;} 

</style> 

Answer 1

установить колонтитул на месте нужно просто сбросить width: 905px; в .bottomNav класса

Answer 2

использования (ширина: calc) в css

, например. и нужно заголовок 100px и 100px колонтитул с 100% высоты содержимого

CSS

body, html{height:100%; margin:0px;} 
.header{height:100px;} 
.footer{height:100px;} 
.content{height: 100%; 
    height: -webkit-calc(100% - 200px); 
    height: -moz-calc(100% - 200px); 
    height: calc(100% - 200px); 
} 

мы устанавливаем -200 bcoz высота заголовка 100px + высота колонтитула 100px так 100 + 100 = 200