VPF::"Резиновая" высота блока - Форум программистов

Ferromarron

Дата 18.3.2007, 17:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Внутри блока "global" есть еще три блока:

Код


<style>
body, html {margin:0; padding:0}
#global {width:800px; min-height:100%;}
* html #global {height:100%;} /*хак для ИЕ6*/
#b1 {width:100%; height:80px;}
#b2 {width:100%;}
#b3 {width:100%; height:80px;}
</style>

<body>
<div id="global">
   <div id="b1">....</div>   
   <div id="b2">....</div>
   <div id="b3">....</div>
</div>
</body>

Нужно, чтобы высота блока "b1" занимала остальное пространство блока "global",
т.е. высота "b1" = 100% - 160px.

SelenIT

Дата 18.3.2007, 19:32 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Ferromarron, делайте блоку #b2 верхний и нижний margin-ы по 80px соответственно. А #b1 и #b3 позиционируйте абсолютно относительно #global (задав последнему position:relative), с top: 0 и bottom: 0 соответственно. Либо вынесите #b3 наружу #global и задайте ему margin: -80px 0 (так в IE будет даже красивее, "подвал" не будет "прыгать"). А фон, предназначенный для центрального блока, укажите для #global, со смещением на те же 80px вниз.

P.S. Имхо, тема на 100% относится к верстке, JS тут лишний...

Это сообщение отредактировал(а) SelenIT - 18.3.2007, 19:33

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Ferromarron

Дата 19.3.2007, 13:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Я это знаю. Проблема, что вынести "подвал" сейчас не получится. А эта зараза "прыгает" и только в ИЕ6 и только в одном случае.

Мне просто нужно узнать способ как через JS задать такого типа высоту.

Ferromarron

Дата 19.3.2007, 19:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Подумал я немного и решил просто для b2 задать высоту = 100% с двумя отрицательными margin-ами по -80px без выноса блока.

Вопрос поставлю по другому (уже для других целей): как с помощью JS можно узнать высоту (и ширину) блока в пикселях в данный момент времени, если она "резиновая".

Это сообщение отредактировал(а) Ferromarron - 19.3.2007, 19:59

Mymik

Дата 19.3.2007, 21:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

запросить у объекта свойство offsetHeight и offsetWidth возвратят возвращают высоту и ширину соответственно.

Код


    document.getElementById("<ID элемента>").offsetWidth; /* Возвращает непосредственную ширину в пикселях */
    document.getElementById("<ID элемента>").offsetHeight; /* Возвращает непосредственную высоту элемента */

    document.getElementById("<ID элемента>").style.width; /* Возвращает указанную ширину прописанную в style */
    document.getElementById("<ID элемента>").style.height; /* Возвращает указанную высоту прописанную в style */

Это сообщение отредактировал(а) Mymik - 19.3.2007, 21:45

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

SelenIT

Дата 20.3.2007, 16:45 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Mymik, только здесь лучше брать clientHeight, а не offset... - нужна ведь высота, доступная изнутри (мало ли, вдруг бордеры какие появятся).

Цитата(Ferromarron @ 19.3.2007, 19:57

)

Подумал я немного и решил просто для b2 задать высоту = 100% с двумя отрицательными margin-ами

Есть подозрение, что без правки остального кода из первого поста будет адекватно работать только в IE. Также есть опасения, что позиционирование "подвала" JS-ом будет страдать тем же недостатком, что вариант с абс. позиционированием... буду рад, если они не подтвердятся)

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Mymik

Дата 20.3.2007, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Цитата(SelenIT @ 20.3.2007, 16:45

)

Mymik, только здесь лучше брать clientHeight, а не offset... - нужна ведь высота, доступная изнутри (мало ли, вдруг бордеры какие появятся).

Честно не знал, возьму и себе на заметку. smile

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Ferromarron

Дата 20.3.2007, 19:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Цитата(SelenIT @ 20.3.2007, 16:45

)

Нет Вы правы. Я по глупости проверил без doctype и везде работало. А в реальной ситуации высоту можно задать, если указана высота родителя (min-height к ней не относится) IE7 с этим проблем нет, а под IE6 придумаю какую-нибудь другую хитрость.

Mymik, спасибо за код

Mymik

Дата 21.3.2007, 00:17 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Ferromarron, а под IE6 попробуй expression :o)

типа в CSS надо добавить вот такое вот -->>

Код


height: expression(document.getElementById("<ID элемента>").clientHeight < 400 ? (400 + "px") : "inherit");

Это типа заморочка IE, можно использовать JS в CSS :о).

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Ferromarron

Дата 21.3.2007, 00:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Я всегда считал, что это возможно только в 5 версии, на которую я давно благополучно забил.

Mymik

Дата 21.3.2007, 00:38 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Ferromarron, не, в IE6 это тоже возможно :о)... я вот тут вот задавал вопрос по этому поводу -->> http://forum.vingrad.ru/topic-141735.html

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »