Форум

Триви · #1 (**permalink**) 12.09.2011, 00:49

Доброй ночи, коллеги.. Никак не получается привязать содержимое дива к его низу..
Ну и чтоб кроссбраузерно было разумеется..
Чо я только не делал уже..
Если прописать диву display:table-cell; vertical-align:bottom;
то атрибут таблиц width перестаёт быть резиновым почему то,
да плюс ко всему прочему пропадает скролл на диве((
Вопсчим, жесть

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   // расчёт высоты div#outer 
   // (обязательно нужно, не буду объяснять зачем,
   // т.к. пример сильно упрощённый)
   var window_h = $(window).height();
   var outer_h=window_h-200;
   $("#outer").css({'overflow-y': 'scroll', 'height': outer_h, 'width': '100%'});

   block = mess("Вася Пупкин", "Всем привет, меня зовут Василий.", "11.09.2011") +
           mess("Стояна Ракова", "Всем привет, я Стояна.", "10.09.2011");
   $('#topic').scrollTop($('#topic').html(block));
});

function mess(users_name, message, date_string) {
  var mess_block = '<table width=100% border="1" style="margin-bottom:10px"> \
                      <tr> \
                        <td><p><b>' + users_name + '</b></p></td> \
                        <td align="right"><p>' + date_string + '</p></td> \
                      </tr> \
                      <tr> \
                        <td colspan=2><p>' + message + '</p></td> \
                      </tr> \
                    </table>';
  return mess_block;
}
</script>

<body style="margin:0">
<div style="background-color:#CCC; height:200px; border: 1px solid"><h1>Ш А П К А</h1></div>

<div id="outer">
  <div id="topic"></div>
</div>
</body>

Пример в дейстивии

ksa · #2 (**permalink**) 12.09.2011, 15:08

Сообщение от Триви

Никак не получается привязать содержимое дива к его низу..

Картинка есть, того, что нужно сделать?

Триви · #3 (**permalink**) 12.09.2011, 15:30

Сообщение от ksa

Картинка есть, того, что нужно сделать?

См.
Пример в дейстивии

Нужно таблицы привязать к нижней границе дива, сохранив его размеры и скролл.
Щас таблицы наверху((

ksa · #4 (**permalink**) 13.09.2011, 08:44

Сообщение от Триви

См.
Пример в дейстивии

Пирмер лучше выкладывать тут как текст, с которым потом можно работать...

Сообщение от Триви

Нужно таблицы привязать к нижней границе дива, сохранив его размеры и скролл.

Как вариант, таблицы в див, диву абсолютное позиционирование, ну и вниз его.

Триви · #5 (**permalink**) 13.09.2011, 13:29

Сообщение от ksa

Пирмер лучше выкладывать тут как текст, с которым потом можно работать...

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

Сообщение от ksa

Как вариант, таблицы в див, диву абсолютное позиционирование, ну и вниз его.

Вапсче лабудень какая то (( http://www.usaparts.ru/tests/4-1.html

пи.си. да, забыл добавить, всё должно быть в пределах области видимости экрана..
тут же всё уехало!

ksa · #6 (**permalink**) 13.09.2011, 14:05

Сообщение от Триви

не получится

Это ты так думаешь...

У остальных-то получается...

Сообщение от Триви

Вапсче лабудень какая то (( http://www.usaparts.ru/tests/4-1.html

Я х/з что ты там ваяешь...

Сообщение от Триви

забыл добавить, всё должно быть в пределах области видимости экрана

Ну начинается!

Если все, всегда хочешь видеть на экране и в определённом месте это

position: fixed;

Триви · #7 (**permalink**) 13.09.2011, 14:31

Сообщение от ksa

Это ты так думаешь...

У остальных-то получается...

Что ж.. попробуем:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   var window_h = $(window).height();
   var outer_h=window_h-200; // вычисляем размер outer
   $("#outer").css({'overflow-y': 'scroll', 'height': outer_h, 'vertical-align': 'bottom', 'width': '100%'});

   block = mess("Вася Пупкин", "Всем привет, меня зовут Василий.", "11.09.2011") +
              mess("Стояна Ракова", "Всем привет, я Стояна.", "10.09.2011")
   $('#topic').scrollTop($('#topic').html(block));
});

function mess(users_name, message, date_string) {
  var mess_block = '<table width=100% border="1" style="margin-bottom:10px"> \
                      <tr> \
                        <td><p><b>' + users_name + '</b></p></td> \
                        <td align="right"><p>' + date_string + '</p></td> \
                      </tr> \
                      <tr> \
                        <td colspan=2><p>' + message + '</p></td> \
                      </tr> \
                    </table>';
  return mess_block;
}
</script>

<body style="margin:0">
<div style="background-color:#CCC; height:200px; border: 1px solid"><h1>Ш А П К А</h1></div>

<div id="outer">
  <div id="topic"></div>
</div>
</body>

Сообщение от ksa

Я х/з что ты там ваяешь...

Да какая разница что?

Придётся повториться..
Есть пример
и я просто хочу притянуть таблицы книзу.
Это всё что я хочу.. профессор, как слышите? приём!

Сообщение от ksa

Ну начинается!

Если все, всегда хочешь видеть на экране и в определённом месте это

position: fixed;

это не подходит, потому что таблиц может быть от одной до туевой хучи

и все они умещаются в диве со скроллом,
размеры которого вычисляются в зависимости от размеров меняющегося контента до него,
т.о. чтобы не выпадать из области видимости!

пи.си. с праздником

ksa · #8 (**permalink**) 13.09.2011, 15:45

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

Твой пример вообще не работает если я его скопирую к себе...
Твой "пример" по ссылке я не могу править - значит он для меня бесполезен...

Макета ты не даёшь... Т.е. задание так и непонятно.
"Нужно прижать книзу" - я тебе написал как можно прижать книзу.
"Нужно чтобы было всегда видно на экране" - написал и про это.

Сообщение от Триви

с праздником

Спасибо

ksa · #9 (**permalink**) 13.09.2011, 15:48

Триви, если деньги есть - можно созвониться и таки порешать твою проблему...
Готов платить за услуги?

Триви · #10 (**permalink**) 13.09.2011, 19:35

Да за что тут платить? =))
Да блин, your-bunny-wrote, неужели я так коряво объясняю???!

Ок, упростим до обычной вёрстки.
Во всех браузерах приведенный ниже кусок отображается одинаково.

<style>
div#outer {
  width:100%;
  height:300px;
  background-color:#F00;
  border: 1px solid;
  overflow-y:scroll
}
div#topic {
  background-color:#0F0;
  border: 1px solid;
}
</style>

<div id="outer">

  <div id="topic">

    <table width=100% border="1" style="margin-bottom:10px">
     <tr>
       <td><p><b>Вася Пупкин</b></p></td>
       <td align="right"><p>11.09.2011</p></td>
     </tr>
     <tr>
       <td colspan=2><p>Всем привет, меня зовут Василий.</p></td>
     </tr>
    </table>

  </div>

</div>

Вопрос. Как опустить div#topic к нижней границе div#outer?
при этом сохранив:
1. скролл
2. резиновость вёрстки
3. кроссбраузерность

Полагаю, что для тех, кто на вёрстке собаку съел,
дать правильный ответ не составит никакого труда..
Или ещё пофлудим?

Форум

Справочник

Discord чат

Курсы javascript