Резиновые дивы с прокруткой Java Script
Вложений: 2
Доброго времени суток.
Проблема вот в чем - нужно сделать весь сайт резиновым, внутренний блок с видео может быть с фиксированными шириной и высотой, а блок с сообщениями должен быть резиновым (когда не будет видео он должен занимать все пространство контента), но когда видео присутствует и пользователи пишут большое количество сообщений блок сообщений не должен растягиваться, а появлялись полосы прокрутки. Изображения прикрепляю (второе изображение - дизайн). Буду благодарна за любую помощь. |
Все, что вы описали, решается исключительно css.
|
Дело в том что с помощью css не получается. Получается сделать либо резиновый блок сообщений но без прокрутки, либо с прокруткой, но ограниченный в высоту.
|
выложи код, посмотрим
|
Заказчик попросил верстать таблицей. Пробовала обернуть блоки в дивчик (wrap-center), чтобы ограничить, но проблема с прокруткой остается.
<td width="80%" bgcolor="#990033" valign="top"> <div class="wrap-center"> <div class="video-block" align="center"> <div class="video-block-inner"> <span class="video-inner"> </span> </div> </div> <div class="message-block" id="message-block"> <input name="" value="63" id="last-id-massage" type="hidden" /> <div class="chat" style=""> <span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span> <span class="time title-text">2013-05-11 20:33:48-№1 </span> <hr /> <p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p> </div> <div class="chat" style=""> <span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span> <span class="time title-text">2013-05-11 20:33:48-№1 </span> <hr /> <p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p> </div> <div class="chat" style=""> <span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span> <span class="time title-text">2013-05-11 20:33:48-№1 </span> <hr /> <p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p> </div> <div class="chat" style=""> <span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span> <span class="time title-text">2013-05-11 20:33:48-№1 </span> <hr /> <p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p> </div> </div><!-- .message-block --> </div> <!--.wrap-center --> </td> /****CSS******/ .video-block { background: url("../img/layout/sidemiddle/panel_2.png"); height: 282px; width: 721px; position:relative; padding: 5px; border-radius: 3px; margin-bottom: 9px; margin-left: 7px; } .video-block-inner { position: relative; height: 272px; width: 465px; background: url(../img/layout/sidemiddle/video.png); margin: 5px; } .video-inner { position: absolute; top: 5px; left: 5px; height: 257px; width: 450px;background: url(../img/layout/sidemiddle/video_inner.png); } .message-block { position: relative; padding: 5px; width: 721px; height: auto !important; min-height: 100%; background: #c7d1d3; background: -webkit-linear-gradient(top, #cdd4d7, #acb9be); background: -moz-linear-gradient(top, #cdd4d7, #acb9be); background: -o-linear-gradient(top, #cdd4d7, #acb9be); background: -ms-linear-gradient(top, #cdd4d7, #acb9be); -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; overflow: auto; margin-left: 7px; border-top: 1px solid #b0b5b7; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; } .wrap-table { max-height: 100%; } |
Беда в том, что я не могу ограничить блок сообщений, т.к. если не будет видео он должен растягиваться и занимать освободившееся место, а блок с видео схлопываться.
|
имхо таблица это зло, переубедите заказчика
|
Цитата:
|
Ребят, есть ли такое свойство в ява скрипт, которое бы рассчитывало высоту блока сообщений, кода блок с видео схлопывается?
|
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <div id="d"> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style type="text/css"> #d { width: 30px; height: 300px; } </style> <script type="text/javascript"> alert($('#d').height()); </script> </body> </html> |
Цитата:
|
Часовой пояс GMT +3, время: 17:43. |