CSS box stretch, чтобы занять все доступные комнаты

Так что я пытаюсь создать этот макет.CSS box stretch, чтобы занять все доступные комнаты

Вот картинка из 3-х «коробки», которые составляют страницы: https://dl.dropbox.com/u/9699560/layout.jpg

А вот моя попытка: https://dl.dropbox.com/u/9699560/map.html

Красная коробка является Google Map, поэтому, если его высота не указанный, он сжимается до нуля. Я пытаюсь сделать следующее:

Зеленая коробка - фиксированная ширина, фиксированная высота. Синяя коробка должна занимать 20% от вертикальной высоты страницы с максимальной высотой 100 пикселей. Красный ящик должен занимать все оставшееся вертикальное пространство.

Если кто-то может понять это, я хотел бы пойти немного дальше, так что, когда окно браузера расширяется вертикально, а верхняя часть синего квадрата достигает уровня нижней части зеленого ящика, он расширяется слева, чтобы занять 100 % от ширины страницы.

Я пробовал поплавки, абсолютное и относительное позиционирование, и я не могу заставить это работать с чистым CSS. Если я должен, я буду использовать JavaScript, но я хотел бы избежать этого, если это единственный вариант.

Спасибо!

Вот попытка (удалить комментарии, если вы используете его):

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

#nav { 
    position: relative; 
    width: 200px; 
    height: 400px; 
    background-color: green; 
} 

#map { 
    position: absolute; 
    top: 0; 
    left: 200px; 
    right: 0; 
    height: 80%; // If #footer is 200px, should occupy all available space 
    background-color: red; 
} 

#footer { 
    position: absolute; 
    left: 200px; // Should "become" 0 when window height pulls it past #nav 
    right: 0; 
    bottom: 0; 
    height: 20%; 
    max-height: 100px; 
    background-color: blue; 
}

и HTML

<html> 
    <head></head> 
    <body> 
     <div id="nav"></div> 
     <div id="map"></div> 
     <div id="footer"></div> 
    </body> 
</html>

источник

2010-08-07 Nick

Пожалуйста, разместите вашу заявку, чтобы нам не пришлось пройти столько работы? –

Какой браузер (ы) вам нужно поддерживать? – babtek

Самым низким знаменателем будет IE 7. – Nick

На мой взгляд, вам нужно JavaScript, чтобы осуществить это.

Моя отправная точка, вероятно, будет от этой разметки, может выполнять мин/макс поведения высоты в обработчик событий, который срабатывает на изменение размера:

CSS

html, body { margin: 0; padding: 0; } 
#nav { background-color:green; width: 200px; height: 400px; float:left; } 
#map { background-color:red; height: 80%; margin-left: 200px; } 
#footer { background-color: blue; height:20%; }

HTML

<div id="nav">nav content</div> 
<div id="map">map content</div> 
<div id="footer">footer content</div>

источник

2010-08-08 01:53:34 babtek

CSS box stretch, чтобы занять все доступные комнаты

ответ

Смежные вопросы