VPF::растянуть div по высоте - Форум программистов

check

Дата 27.7.2007, 14:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


<html>
<head>
<style type="text/css">
  * { padding:0; margin:0; }
  #content { position:relative; min-height:100%; }
  #footer { height:40px; width:100%; position:absolute; bottom:0;background-color:#AFEEEE;}
</style>
</head>
<body bgcolor="#EBEBEB">
<div id="content">
  <table width="100%" cellspacing="0">
  <tr><td height="40" bgcolor="#AFEEEE">
     &nbsp;&nbsp;&nbsp;<span style="color: rgb(139, 0, 0); font-weight: bold;">Текст</span>
  </td></tr>
  </table>
<fieldset>
   style="margin:10px;height:100%">

    текст

  </div>
</div>    
</fieldset>
<div id="footer">
<table width="100%" height="100%" cellspacing="0">
  <tr>
    <td width="50%">&nbsp;</td><td align="center" valign="middle">&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

Как сделать, чтобы див с id="mid" занимал всё свободное пространство между таблицей сверху и футером?
То есть рамка fieldset должна вплотную прилегать к ним и охватывать все свободное пространство
и не должна зависеть от объёма текста внутри <div id="mid">.

Это сообщение отредактировал(а) check - 27.7.2007, 14:37

SamDark

Дата 27.7.2007, 14:47 (ссылка)

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

Загрузка ...

Добрый кот

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

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

check,
DOCTYPE какой?

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

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

japanes

Дата 27.7.2007, 16:33 (ссылка)

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

Загрузка ...

Бывалый

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

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

check, в ИЕ свойство min-height не работает.

Код


<style type="text/css">
  html {height:100%;}
  body { padding:0; margin:0; height:100%; }
  #content { position:relative; min-height:100%;//height:100%; }
</style>

так должно работать во всех браузерах.

check

Дата 27.7.2007, 17:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(SamDark @ 27.7.2007, 14:47

)

DOCTYPE какой?

Никакого. Это может помочь?

japanes, у меня не работает, причём кроссбраузерно =(

SelenIT

Дата 27.7.2007, 19:54 (ссылка)

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

Загрузка ...

баг форума

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

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

Имхо, для Quirks mode (который тут и используется) лучшее решение - таблица. Любые бестабличные варианты требуют специфических хаков. Недавно была похожая тема (там нужно было растянуть iframe похожим образом) - но варианта для Safari лично я так и не нашел. Впрочем, есть еще одна кроссбраузерная альтернатива - использовать Javascript, но это "неспортивно как-то"...

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

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

japanes

Дата 28.7.2007, 10:41 (ссылка)

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

Загрузка ...

Бывалый

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

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

check, должно работать при разметке:

Код


<body>
<style type="text/css">
  html {height:100%;}
  body { padding:0; margin:0; height:100%; }
  #content { position:relative; min-height:100%;//height:100%;/* забыл вот это: */ margin:0px; }
</style>
<div id="content">
  sdasf
</div>
</body>

check

Дата 28.7.2007, 16:03 (ссылка)

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

Загрузка ...

Опытный

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

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

Но у меня-то разметка другая.

Я поступил совсем неспортивно

Код


<hr style="position:absolute;top:40px;"/>

Код


<hr style="position:absolute;bottom:40px;"/>

А филдсет убрал совсем. Визуально это выглядит так же как филдсет натянутый(прошу прощения конечно) на div занимающий 100% свободного места. Или же как вариант надеть по филдсету на шапку и на футер.

ЗЫ Что такое Quirks mode?

japanes

Дата 28.7.2007, 16:52 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(check @ 28.7.2007, 15:03

)

Но у меня-то разметка другая.

так ты можешь перенести все в блок <div id="content"></div>. просто такой див необходим для того, что бы футер был все время внизу (при других разметках с абсолютно поз. дивом и нулевым ботомом, при body > чем 100%, в смысле body с прокруткой, див-футер внизу не держиться).

SelenIT

Дата 28.7.2007, 17:26 (ссылка)

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

Загрузка ...

баг форума

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

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

Цитата(check @ 28.7.2007, 16:03

)

Что такое Quirks mode?

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

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

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

liliana2

Дата 4.12.2007, 09:46 (ссылка)

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

Загрузка ...

Бывалый

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

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

[URL=http://sibznak.com/test69/mangal.shtml]
Контент имеет min-height, а в связи с тем, что ie не поддерживает min-height, Слева 2 блока налагаются друг на друга
как сделать чтобы в ie отображалось также корректно как и в других браузерах?

Это сообщение отредактировал(а) liliana2 - 4.12.2007, 09:48

SelenIT

Дата 4.12.2007, 10:22 (ссылка)

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

Загрузка ...

баг форума

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

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

liliana2, в IE height работает так, как должен min-height. Поэтому используйте любой хак для IE (лучше всего фирменный - conditional comments) и задайте соотв. height только для IE...

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

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

liliana2

Дата 4.12.2007, 10:25 (ссылка)

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

Загрузка ...

Бывалый

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

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

У мну с комментами вообще все плохо,
Должно быть так?:


не могли бы вы подсказатькуда его вставлять этот коммент?

Это сообщение отредактировал(а) liliana2 - 4.12.2007, 11:32

SelenIT

Дата 4.12.2007, 11:17 (ссылка)

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

Загрузка ...

баг форума

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

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

Вот так:

Код


<!--[if IE]>
<style>
#content { height:600px; }/* или как там этого дива зовут... :) */
</style>
<![endif]-->

Вставлять после <link>-а на основную таблицу стилей.

Это сообщение отредактировал(а) SelenIT - 4.12.2007, 11:34

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

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

liliana2

Дата 4.12.2007, 11:25 (ссылка)

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

Загрузка ...

Бывалый

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

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

Что я делаю не так что все равно не работает?
Файл (сcss) Делаю так:

Код


<!--[if IE]> #info: height:600px; <![endif]-->
#main{
    width:850px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    clear: both;
    margin-right: 50px;
    margin-left: 50px;
    min-height: 600px;
}
#top{
    font-family: Arial;
    width: 800px;
    clear: right;
    background-image:  url(img/s8.jpg);
    height: 140px;}

Все равно не работает

Это сообщение отредактировал(а) liliana2 - 4.12.2007, 11:33

SelenIT

Дата 4.12.2007, 11:36 (ссылка)

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

Загрузка ...

баг форума

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

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

liliana2, простите пожалуйста - я выше фигню написал (ночка бессонная на мозгах сказалась). Теперь исправил. Внутри коммента, конечно же, стандартный синтаксис CSS - селектор { свойство:значение }.

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

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

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