forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   Помогите с разметкой (http://forum.boolean.name/showthread.php?t=17878)

h1dd3n 13.02.2013 22:14

Помогите с разметкой
 
Привет!
Прошу помочь с разметкой страницы... Как я вижу "это":

При этом header и footer фиксированы по высоте (30-40 px) по ширине должны занимать всю страницу, но не более чтобы не было скроллбаров.
list растягивается вместе со страницей но по ширине также фиксирован, и наконец map занимает "все остальное". Пример: maps.rosreestr.ru (у них там в верстке есть и служебные дивы, но общий смысл тот же). Я сначала посмотрел их css и сделал так же, но есть проблема - если я изменяю размеры браузера, то верстка на это никак не реагирует (может это надо на js делать?)... В принципе на место map дива я создам ext panel и содержание буду добавлять именно в панель. Если кто-нибудь может что-нибудь подсказать, буду очень благодарен)
PS
текущий вариант (list и map в данном случае объединены 1 див):
Код:

#gismain {
    position: fixed;
    bottom: 35px;
    top: 41px;
    left: 10px;
    right: 10px;
    margin: 0px;
}
#gisheader {
    height: 41px;

    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;

    border-bottom: 1px solid #d3d3d3;

    text-align: right;
}
#gisfooter {
    border-top: 1px solid #d3d3d3;

    position: fixed;
    bottom: 0px;
    left: 10px;
    right: 10px;

    height: 35px;
}


den 13.02.2013 22:34

Ответ: Помогите с разметкой
 
http://jsfiddle.net/hVTWj/
вот моё вИденье, на правильность не гарантирую, сам не так давно этим делом занялся)
upd: для main задал высоту в сто пикселей для примера, на деле он будет тянутся если там будет что-нибудь.

moka 13.02.2013 22:45

Ответ: Помогите с разметкой
 
В следующий раз, будь добр воспользоваться http://jsfiddle.net/ чтобы сделать пример и выложить его - как твои наработки.
А остальные смогут без проблем отредактировать.

Вот: http://jsfiddle.net/2kSrT/1/
И протестируй его гибкость тут: http://moka.co/restest/#http://fiddl.../2kSrT/1/show/


Часовой пояс GMT +4, время: 13:00.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot