Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Таблица не менее 100% экрана для xhtml 1.0  (Прочитано 13507 раз)
0 Пользователей и 1 Гость смотрят эту тему.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« : 18-11-2006 14:06 » 

Распространенный метод - атрибут height таблицы - отсутствует в спецификациях html 4.0 и выше. Чтобы создавать современный код (не ниже xhtml 1.0 transitional) нужно найти замену, соответствующую стандартам.

Я попробовал реализовать распорку:

- отдельная ячейка в таблице с rowspan на все строки, содержит div;
- div имеет width - 0px и background-image - прозрачный gif 1х1 (иначе IE игнорирует изменение размера пустого блока);
- в конце страницы вставка JS для растяжки div-а на высоту окна.
- растяжка html и body на 100% (экрана и содержимого)

Работает на ура в Seamonkey 1.0.5 (Gecko 1.8.0.7) и IE6.

Фрагмент кода (содержимое body):
Код: (Text)
<div id="main_background">
        <table cellpadding="0" cellspacing="0" id="main_layout">
                <tr>
                        <td rowspan="5"><div id="vert_stick"></div></td>
                        <td><!-- header --></td>
                </tr>
                <tr>
                        <td><!-- upper menu --></td>
                </tr>
                <tr>
                        <td><!-- body --></td>
                </tr>
                <tr>
                        <td><!-- lower menu --></td>
                </tr>
                <tr>
                        <td><!-- footer --></td>
                </tr>
        </table>
</div>

<script type="text/javascript">//<![CDATA[
document.getElementById('vert_stick').style.height =
        (window.innerHeight ? window.innerHeight : document.body.clientHeight) + 'px';
//]]></script>
Код: (CSS)
html
{
        height: 100%;
        background-color: #339999;
}

body
{
        margin: 0;
        padding: 0;
        height:auto !important;
        height: 100%;
        min-height:100%;
        background-color: #339999;
        color: black;
        font-family: verdana,arial,sans-serif,helvetica;
        font-size: 12px;
        font-weight: normal;
}

div
{
        margin: 0;
        padding: 0;
}

table
{
        empty-cells: show;
}

#main_mainground
{
        background-color: #EBEBEB;
}

#main_layout
{
        width: 100%;
}

#vert_stick
{
        background: url("images/1.gif");
        border: none;
        width: 0px;
        float: right;
        margin: 0;
        padding: 0;
}

Осталась следующая проблема: при малом объеме ячейки растягиваются и внешний вид приобретает некрасивый вид.
Какие есть идеи по фиксированию размера отдельных строк - чтобы вся избыточная высота досталась одной строке (body)?
« Последнее редактирование: 14-12-2007 16:09 от Алексей1153++ » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 02-12-2006 15:07 » 

Результат борьбы с IE и Mozilla можно наблюдать тут: http://club.shelek.ru/alt2/exp.php

Вставил распорку и растягиваю ее до размеров экрана или страницы (IE).
В body вложена таблица из 5 строк: заголовок, верхнее меню, основная часть, нижнее меню, footer.
Для всех блоков, кроме основной части, в CSS определил height в пикселях (имеено для строк - tr). IE этот случай игнорирует.
В конце файла поместил ф-ию, которая делает ставит распорку и, персонально для IE, устанавливает размер основной части.
Также эту ф-ию повесил на window.onresize. Для IE она выполняет перезагрузку страницы, для нормальных браузеров - просто меняет размер.


Offtopic:
IE - большая куча Г. Я зол!
Поставлю в угол.

Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 02-12-2006 16:44 » 

Opera 9.02 - подходит метод IE - задание размера средней части. Колбасит вертикальное выравнивание. Как оказалось, Opera не наследует tr/vertical-align для td.

FireFox 2.0 - реакция как у Mozilla.
« Последнее редактирование: 02-12-2006 16:55 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #3 : 03-05-2007 19:23 » 

кстати.
а если попробовать так?
Код:
html {
height: 100%;
}
body {
height: 100%;
}
#all {
min-height: 100%;
position: relative;
width: 100%;
}
* html #all {
height: 100%;
}
у меня работает. (opera 7-8-9, сафари2, конк3.5, файрфокс1.5-2, ие6-7)
А ещё к этой конструкции снизу можно подвал прибить такой, чтобы не уползал наверх, если содержимого мало.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines