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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> IE DIV внутри TD и overflow, Во вложеннном диве не появляется scroll 
V
    Опции темы
rabbitObject
Дата 10.6.2009, 20:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Привет!

В приведенном ниже примере кода DIV элемент с id inner растягивается, а в "главном" диве появляются полоы прокрутки.
Ожидается чтобы DIV элемент с id inner не менял своих размеров и имел скроллбары если содержимое шире/выше его области. Главный див соответственно не имел полос прокрутки, так как все его содержимое не превышет его размеров.

Код


<div style="height: 415px; overflow: auto; width: 260px;">
        <table style="width: 100%; height: 100%">
            <tr>
                <td style="width: 100%;">
                    <div id="inner" style="width: 100%; overflow: auto; height: 100px">
                        <div style="width: 500px; height: 100px">&nbsp;</div>
                    </div>
                </td>
             </tr>
        </table>
</div>



Есть ли какие-нибудь идеи? Может кто-то сталкивался или такие темы уже были на форуме...  smile 
PM MAIL   Вверх
bazzjr
Дата 10.6.2009, 22:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Вот что тебе нужно: 


Код

<div style="height: 415px; overflow: hidden; width: 260px;">
        <table style="width: 100%; height: 100%">
            <tr>
                <td style="width: 100%;">
                    <div id="inner" style="width: 100%; overflow: auto; overflow-x:scroll; height: 100px">
                        <div style="width: 500px; height: 500px">&nbsp;</div>
                    </div>
                </td>
             </tr>
        </table>
</div>


PM MAIL ICQ   Вверх
rabbitObject
Дата 11.6.2009, 14:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Спасибо за ответ, но это не совсем то, что я ожидал:

1. Здесь постоянно маячит скроллбар. Должен быть auto
2. Див inner не должен превышать по ширине "главный" див (тот, который вс есодержит)
3. Под каким браузером ты это тестил? Я спрашиваю, потому что в IE7 тут даже скроллбар не весь виден: только его левая часть выглядывает.

Может есть какой-нибудь другой способ использовать overflow: auto для inner? От таблицы отказаться не могу. :(. 
PM MAIL   Вверх
bazzjr
Дата 11.6.2009, 16:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



странные запросы... а почему от таблицы отказаться нельзя?

Код

<div style="height:215px; width:260px; overflow:hidden; border:solid #F00 1px">
        <table style="width:100%; height:100%; background:#CCC" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:100%;overflow:auto;" height="100%" valign="top">
                    <div id="inner" style="overflow:auto; height:100%; background:#0F0">
                        1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />
                        1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />
                        1111<br />1111<br />1111<br />1111<br />1222222<br />
                    </div>
                </td>
             </tr>
        </table>
</div>


PM MAIL ICQ   Вверх
rabbitObject
Дата 11.6.2009, 20:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



хм.. странно, скроллбар все равно за пределами области видимости, так как внутреений див шире внешнего.

Цитата

 а почему от таблицы отказаться нельзя?

Ну, потому, что на самом деле в ней несколько строк... (в примере показал только одну), с помощью неё создан "аккордион" (Accordion) c установленными width и height в 100%. Так, как див  работает с процентными высотами по другому....

Это сообщение отредактировал(а) rabbitObject - 11.6.2009, 20:05
PM MAIL   Вверх
bazzjr
Дата 12.6.2009, 07:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Цитата(rabbitObject @  11.6.2009,  20:01 Найти цитируемый пост)
хм.. странно, скроллбар все равно за пределами области видимости, так как внутреений див шире внешнего.


Может быть конечно у тебя какой нибудь мегя браузер, НО у меня во всех браузерах одинаково!

Видишь тот бордюр в 1 пиксель? вот это и есть граница первого дива, а все что зеленным это внутри, и как тут внутрений может быть больше чем внешний???  smile 

Покажи скриншот свой.
PM MAIL ICQ   Вверх
rabbitObject
Дата 12.6.2009, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Цитата

Может быть конечно у тебя какой нибудь мегя браузер, НО у меня во всех браузерах одинаково!

Я понимаю, что текст там смотрится отлично. Просто я потестил с тем дивом в inner'е, который ты заменил текстом в своем примере:
Цитата

Код

<div style="width: 500px; height: 500px">&nbsp;</div>



Вот скрин: http://pic.ipicture.ru/uploads/090612/IJJyWnA2W7.gif.

Может можно еще что-нибудь сделать, чтобы overflow работал так, как ожидается, и в этом случае? BWT, спасибо за усилия 
PM MAIL   Вверх
ksnk
Дата 12.6.2009, 16:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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



Код

       <table style="width:100%;table-layout:fixed;"><col width="260">
            <tr>
                <td><div id="inner" style="overflow: auto; height: 100px">
                        <div style="width: 500px; height: 100px">&nbsp;</div>
                    </div>
                </td>
             </tr>
        </table>



Добавлено через 30 секунд
решением является первая строчка



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


Новичок



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

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



ksnk, это действительно то что мне было нужно. Спасибо! smile 

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


 




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


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

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