CSS: 2 DIV, один занимает фиксированный размер, другой заполняет оставшееся пространство - PullRequest
Новая
       10

CSS: 2 DIV, один занимает фиксированный размер, другой заполняет оставшееся пространство

0 голосов
/ 11 ноября 2009

У меня есть 2 DIV, один из которых содержит карту, этот выше другого. Он должен занимать все доступное пространство, за исключением нижнего колонтитула, высота которого составляет 25 пикселей.

В настоящее время я даю карту 95% высоты, а нижний колонтитул 25px. Проблема в том, что когда окна становятся действительно большими, нижний колонтитул становится огромным, а когда окна становятся очень маленькими, появляются полосы прокрутки.

Однако это не то, что я хочу, я хочу: 

#map { height: <window_height - footer_height> }
#footer { height: 25px }

Как я могу добиться этого, используя только CSS и HTML?

PS. Я знаю, что, возможно, есть несколько простых решений javascript, но ради образования я хочу знать, как это сделать без javascript.

1 Ответ

1 голос
/ 11 ноября 2009

Посмотрите на это: сохранение нижнего колонтитула внизу страницы

Весь код есть. В основном вы делаете это в своем HTML: 

<html><body>
<div id="container">
   <div id="map"></div>
   <div id="footer"></div>
</div>
</body></html>

А потом в вашем CSS: 

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#map {
   padding:10px;
   padding-bottom:25px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:25px;   /* Height of the footer */
}

Существуют и другие способы достижения этого и аналогичные эффекты. Дайте знать, если это то, что вы хотели.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...