Проблемы с калибровкой div между верхним и нижним колонтитулом

Question

Некоторое время назад я унаследовал страницу, чтобы внести некоторые изменения, которые были брошены вместе с множеством элементов, расположенных вручную и размером, что привело к небрежно выглядящей компоновке. Некоторое время назад я внес некоторые изменения, чтобы очистить вещи (и сделать их похожими на браузеры, что было основной частью запроса). Вот JSfiddle that has more or less the result.

С тех пор я решил, что было бы гораздо лучше, если бы страница была более или менее изящной, поскольку эта страница используется в среде с различными пропорциями. Моя цель состояла в том, чтобы нижняя секция была фиксированной высотой, а текстовая область расширялась, чтобы заполнить пространство, а затем карта, потребляющая оставшуюся часть вертикального пространства. Я сделал это раньше, установив нижний колонтитул в% высоты, а контент до 100% минус эту сумму, но я пытаюсь получить фиксированный верхний нижний колонтитул здесь. Я последовал за несколькими образцами, которые, похоже, должны работать без успеха. Here's a modified JSfiddle where I'm currently at.

Самый актуальный уровень CSS к тому, что я в настоящее время работает с следующим (см jsfiddle для полной страницы):

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

#page { 
    position: relative; 
    width:  100%; 
    height:  100%; 
    background: black; 
    text-align: center; 
} 

#titleBar { 
    display: table; 
    width:100%; 
    height: 60px; 
    background:lightgray; 
} 

#mapWrapper { 
    background:lightblue; 

    position:relative; 
    margin-bottom: 250px; 

    /* need to specify some sort of height to get this to appear*/ 
    /* would be great if I could say "100% - 60px - 240px" */ 
    height:200px; 
} 

#entireBottomBar { 
    position:absolute; 
    bottom:0; 
    left:0; 
    height:auto; 
    width:100%; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

Чтобы быть ясно, как я могу сделать карту ДИВ расширить для заполнения полную вертикальную высоту страницы, без покрытия/закрытия за заголовком и/или нижним колонтитулом.

Answer 1

Я был в состоянии сделать это в паре шагов:

1. Wrap верхние две дивы в одном upperstuffdiv
2. Набор upperstuffdiv для размера границы коробки с нижней границей размер колонтитула, и измените размер окна на прямоугольник (так что высота 100% вычитает пространство, выделенное нижнему колонтитулу)
3. Аналогичным образом, в пределах uperstuffdiv установите карту, чтобы верхняя граница имела размер заголовка (название)
4. изменить размер коробки, чтобы размер 100% был ld правильно для верхней «границы»
5. Изменено название div в позицию: исправлено, потому что я не мог получить float или z-index, чтобы работать так, как я ожидал, чтобы отобразить его на верхней границе карты.

Меня все еще интересуют альтернативные подходы или входы/выходы моей методологии.