Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вертикальное выравнивание внутри DIV + scroll (https://javascript.ru/forum/xhtml-html-css/21484-vertikalnoe-vyravnivanie-vnutri-div-scroll.html)

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

<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 12.09.2011 15:08
Цитата:
Сообщение от Триви
Никак не получается привязать содержимое дива к его низу..
Картинка есть, того, что нужно сделать?

Триви 12.09.2011 15:30
Цитата:
Сообщение от ksa (Сообщение 126107)
Картинка есть, того, что нужно сделать?
См.
Пример в дейстивии

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

ksa 13.09.2011 08:44
Цитата:
Сообщение от Триви
См.
Пример в дейстивии
Пирмер лучше выкладывать тут как текст, с которым потом можно работать...

Цитата:
Сообщение от Триви
Нужно таблицы привязать к нижней границе дива, сохранив его размеры и скролл.
Как вариант, таблицы в див, диву абсолютное позиционирование, ну и вниз его. :)

Триви 13.09.2011 13:29
Цитата:
Сообщение от ksa (Сообщение 126223)
Пирмер лучше выкладывать тут как текст, с которым потом можно работать...
через тег html run?
не получится, потому что с областью видимости экрана тут заморока.

Цитата:
Сообщение от ksa (Сообщение 126223)
Как вариант, таблицы в див, диву абсолютное позиционирование, ну и вниз его. :)
Вапсче лабудень какая то (( http://www.usaparts.ru/tests/4-1.html

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

ksa 13.09.2011 14:05
Цитата:
Сообщение от Триви
не получится
Это ты так думаешь... :D У остальных-то получается...

Цитата:
Сообщение от Триви
Вапсче лабудень какая то (( http://www.usaparts.ru/tests/4-1.html
Я х/з что ты там ваяешь... :lol:

Цитата:
Сообщение от Триви
забыл добавить, всё должно быть в пределах области видимости экрана
Ну начинается! :D
Если все, всегда хочешь видеть на экране и в определённом месте это

position: fixed;

Триви 13.09.2011 14:31
Цитата:
Сообщение от ksa (Сообщение 126271)
Это ты так думаешь... :D У остальных-то получается...
Что ж.. попробуем:
<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 (Сообщение 126271)
Я х/з что ты там ваяешь... :lol:
Да какая разница что? ;)
Придётся повториться..
Есть пример
и я просто хочу притянуть таблицы книзу.
Это всё что я хочу.. профессор, как слышите? приём! :help: :D

Цитата:
Сообщение от ksa (Сообщение 126271)
Ну начинается! :D
Если все, всегда хочешь видеть на экране и в определённом месте это

position: fixed;
это не подходит, потому что таблиц может быть от одной до туевой хучи :victory:
и все они умещаются в диве со скроллом,
размеры которого вычисляются в зависимости от размеров меняющегося контента до него,
т.о. чтобы не выпадать из области видимости! ;)


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

ksa 13.09.2011 15:45
Что-то ты окончательно меня запутал со своими таблицами... :D
Твой пример вообще не работает если я его скопирую к себе...
Твой "пример" по ссылке я не могу править - значит он для меня бесполезен...

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

Цитата:
Сообщение от Триви
с праздником
Спасибо :)

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

Триви 13.09.2011 19:35
Да за что тут платить? =))
Да блин, your-bunny-wrote, неужели я так коряво объясняю???! :-E
Ок, упростим до обычной вёрстки.
Во всех браузерах приведенный ниже кусок отображается одинаково.

<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. кроссбраузерность

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

Андрей38 15.09.2011 17:45
Цитата:
Сообщение от Триви (Сообщение 126034)
Доброй ночи, коллеги.. Никак не получается привязать содержимое дива к его низу..
Ну и чтоб кроссбраузерно было разумеется..
Чо я только не делал уже..
Если прописать диву display:table-cell; vertical-align:bottom;
то атрибут таблиц width перестаёт быть резиновым почему то,
да плюс ко всему прочему пропадает скролл на диве((
Вопсчим, жесть :-E

<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>


Пример в дейстивии
Лично я так поступил_ сделал как делают строители -померял контейнер и его сss top ,затем снял верикальн размер контента и его сss top ...ну и далее арифметика пошла в си эс эсе контента по top .все дивы у меня абсолютные с разными z-index*ами
Вот -смотри
http://www.youtube.com/watch?feature...-cFPGukM#at=66

Триви 22.09.2011 16:55
Андрей38,
Забыл уже про этот топик))
Да, я так и сделал в результате.
Проще блин самому рассчитать, чем возиться с этими стилями..
Приемлемого решения на css, соответствующего моим требованиям, я не нашел..
Поэтому примерно так:

<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">
     <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>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
var outer = $("#outer"), topic = $("#topic"),
    outer_h = outer.height(), topic_h = topic.height(), topic_top = outer_h - topic_h;

(topic_h < outer_h) ? topic_top : topic_top = 0;
topic.css('margin-top', topic_top + 'px');
</script>

Seva1986 06.10.2011 01:20
Триви,

div#outer {
width:100%;
height:300px;
background-color:#F00;
border: 1px solid;
overflow-y:scroll;
position:relative;
}
div#topic {
position:absolute;
bottom:0;
left:0;
right:0;
background-color:#0F0;
border: 1px solid;


Часовой пояс GMT +3, время: 01:04.