То, что я пытаюсь сделать, это иметь верхний колонтитул вверху страницы и нижний колонтитул внизу, а карта заполнит все свободное пространство между ними. Я также хочу, чтобы верхний и нижний колонтитулы имели фиксированную высоту как px, а не%.

Однако, в настоящее время, поскольку я установил основную карту на 100%, это заставляет нижний колонтитул внизу страницы и вводит полосу прокрутки.

Это мой пример кода:http://jsfiddle.net/W4mXP/20/

CSS

html, body { height: 100%;
    width: 100%;
}

#topbar {
    height: 50px; 
    width: 100%; 
    background-color: black;
    padding-left: 50px;
    padding-right: 50px;
}

#main {
    height: 100%; 
    width: 100%;
    background-color: green;
}
#bottombar {
    height: 25px; 
    width: 100%; 
    background-color: black;
    padding-left: 50px;
    padding-right: 50px;
}


.left {float: left;}
.right {float: right;}

HTML

    
         
        
    
    
    
    
        
        Logo
        
        

  
    Choice 1
    Choice 2
    Choice 3
  

        
    
    
    
    Map
    
    
    
        
        Name
        
        
        About