Javascript-форум - Резиновые дивы с прокруткой Java Script

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Резиновые дивы с прокруткой Java Script (https://javascript.ru/forum/dom-window/40113-rezinovye-divy-s-prokrutkojj-java-script.html)

Резиновые дивы с прокруткой Java Script

Доброго времени суток.
Проблема вот в чем - нужно сделать весь сайт резиновым, внутренний блок с видео может быть с фиксированными шириной и высотой, а блок с сообщениями должен быть резиновым (когда не будет видео он должен занимать все пространство контента), но когда видео присутствует и пользователи пишут большое количество сообщений блок сообщений не должен растягиваться, а появлялись полосы прокрутки.

Изображения прикрепляю (второе изображение - дизайн). Буду благодарна за любую помощь.

Все, что вы описали, решается исключительно 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>
</div> 
</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%; }

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

имхо таблица это зло, переубедите заказчика

Цитата:

Сообщение от Kvark (Сообщение 263953)

имхо таблица это зло, переубедите заказчика

можете рассказать почему? если можно, то с примером (можно "на пальцах")

Ребят, есть ли такое свойство в ява скрипт, которое бы рассчитывало высоту блока сообщений, кода блок с видео схлопывается?

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