CSS-поле растягивается, чтобы занять всю доступную комнату - PullRequest
Новая
       21

CSS-поле растягивается, чтобы занять всю доступную комнату

0 голосов
/ 07 августа 2010

Итак, я пытаюсь создать этот макет.

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

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

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

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

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

Я пробовал float, абсолютное и относительное позиционирование, и я не могу заставить это работать с чистым 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>

1 Ответ

0 голосов
/ 08 августа 2010

По моему мнению, вам потребуется JavaScript для реализации этого.

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

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>
...