Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как автоматически задать высоту DIV-а? 
:(
    Опции темы
t77
Дата 22.2.2009, 15:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Доброе время суток.
На странице есть DIV, внутри которого находится таблица.
Задача заключается в том, что если таблица переходит высоту 250 пикселей то появляется полоса прокрутки.
В связи с этим условием установил следующий стиль DIV-у:
Код

.containerDIV
        {
            height:250px;
            width: 170px;    
            overflow: auto;    
        }

Теперь представте, что есть несколько таких DIV-ов, тоесть несколько таблиц, одна под другой. И если в одной из таблиц количество строк минимальное, тоесть одна или две строки, то естественно полоса прокрутки не появляется но появляется другая проблема. Проблема в том, что появляется расстояние между таблицами.
Вот пример:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style>
        .containerDIV
        {
            height:250px;
            width: 170px;    
            overflow: auto;    
        }
        .tableHeaderTd
        {
            background-color:Yellow;    
            position: relative;
            z-index: 30;
            top: expression(this.parentElement.parentElement.parentElement.parentElement.scrollTop-2);
        }
    </style>
</head>
<body >
<center>    
    <div id="div1" class="containerDIV">
    <table border="1" cellpadding="0" cellspacing="1" style="height:150px; overflow: auto;">
    <thead>
    <tr>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
    </tr>
    </thead>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    </table>
    </div>
    <br />
    
    <div id="div2" class="containerDIV">
    <table border="1" cellpadding="0" cellspacing="1">
    <thead>
    <tr>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
    </tr>
    </thead>    
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>   
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    </table>
    </div>
    <br />
   
    <div id="div3" class="containerDIV">
    <table border="1" cellpadding="0" cellspacing="1">
    <thead>
    <tr>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
    </tr>
    </thead>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    </table>
    </div>
    <br />
  
    <div id="div4" class="containerDIV">
    <table border="1" cellpadding="0" cellspacing="1">
    <thead>
    <tr>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
        <td class="tableHeaderTd">
            Header
        </td>
    </tr>
    </thead>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    <tr>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
        <td>
            Column
        </td>
    </tr>
    </table>
    </div>
   
    </center>
</body>

</html>



Обратите внимание на расстояние между 2-ой и 3-ей таблицами!
Так как DIV-у задана высота постоянная он фиксирует это место, независимо от того, сколько строк в таблице. Как задать полосу прокрутки, только в том случае, если высота таблицы превышает допустим 250 пикселей ? Тоесть не фиксировать высоту DIV-а из начально.
PM MAIL   Вверх
awers
Дата 22.2.2009, 15:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 2
Всего: 31
Нанадо столько кода )

Попробуй min-height и max-height
PM MAIL WWW ICQ Skype   Вверх
t77
Дата 22.2.2009, 16:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
То, что нужно! smile 
awers,Спасибо!
PM MAIL   Вверх
awers
Дата 22.2.2009, 16:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 2
Всего: 31
t77, незачто. Только ты всёравно удали сотенку строк из сообщения )
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 22.2.2009, 17:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
t77, а что? для IE тоже сработало?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
t77
Дата 22.2.2009, 19:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
ksnk,Это работает в FireFox, 
Но в InternetExplorer не хочет работать !
Немного погуляв в сети наткнулся на пример, в котором говорится, что ИЕ не знает что такое min-height, max-height...... smile 
Пример использования таков:
Код

.containerDIV
        {
        height: expression(parseInt(this.style.height) > 349 ? "350px" : "auto") ;
        overflow: auto;
        }

Но у меня это тоже не работает smile 
Помогите пожалуйста установить высоту DIV-а в CSS - динамически.Я хочу проверить высоту DIV-а если она превышает 350 пикселей то я устанавливаю высоту в 350, если высота DIV-а меньше 350, то высота будет установлена автоматически. Как это сделать ? 
Весь день пытаюсь сделать и ничего не получается!  smile  smile  smile 
Все примеры из интернета дают следующий пример:
Код

height: expression(this.scrollHeight > 349 ? "350px" : "auto") ;

 Но у меня это не работает!!! 
Что я делаю не так ?
PM MAIL   Вверх
awers
Дата 22.2.2009, 19:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 2
Всего: 31
t77, а яваскрипт то у тебя включен? expression - это яваскрипт
PM MAIL WWW ICQ Skype   Вверх
t77
Дата 22.2.2009, 19:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Ну да, конечно включен!
Проблема в том, что теперь нет полосы прокрутки!
Я думаю, что не устанавливается высота DIV-а...
PM MAIL   Вверх
awers
Дата 22.2.2009, 19:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

Репутация: 2
Всего: 31
(this.style.height) убери тут style

(this.height)
PM MAIL WWW ICQ Skype   Вверх
t77
Дата 22.2.2009, 20:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Вы правы! Но, this.height, тоже не то! Компайлер ругается!
Вот так вот показанно из примеров в сети:
Код

height: expression(this.scrollHeight > 350 ? "350px" : "auto");
overflow: "auto";

Но у меня это не работает smile , тоесть не устанавливается высота и соответственно нет полосы прокрутки...
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0549 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.