Изменение свойства CSS

[Squirr]

И снова вынужден я обратиться к мудрости гуру. Проблема схожая, поэтому новую ветку заводить не стал.
На странице следующая конструкция из блоков:

Блоки div#r0 и div#r1 сменяют друг друга при нажатии на ссылку и имеют разное количество контента (высота их не задана).
Мне нужно добиться того, чтобы при нажатии на ссылку изменялась параметры "height" у div#content и "top" у div#bottom.
Я написал следующий скрипт:

<div id="content">
    	<table width="100%">
        	<tr><td>
            	<div id="contentMenuPersonal">
    	    		<table>
        	    		<tr><td class="contentMenu"><a href="/">Main</a></td></tr>
                        ...
                    </table>
                </div>
                <div id="bannerBig1">
					<div id="r0">
                    	<p>Текст</p>
						<a href="javascript:change_visibility ('r0', 'r1')">Читать далее &rarr;</a>
					</div>
					<div id="r1" style="display: none;">
                    	<p>Текст</p>
						<a href="javascript:change_visibility ('r1', 'r0')">&larr; скрыть текст</a>
					</div>
                </div>
            </td></tr>
        </table>
<script type="text/javascript">
	if (document.getElementById("r1").style.display = 'none') document.getElementById("content").style.height = "1100px";
	else document.getElementById("content").style.height = "1484px";
</script>
	</div>
    <div id="bottom">
<script type="text/javascript">
document.getElementById("content").style.height = ( document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top ) + 'px';
var h = parseInt((document.getElementById("content").getBoundingClientRect().bottom - document.getElementById("content").getBoundingClientRect().top));

//if (h == 1484.8333740234375)
if (h > 1450)
{
	document.getElementById("bottom").style.top = "1620px";
}
else
{
	document.getElementById("bottom").style.top = "1275px";
}
</script>
    </div>

Я долго пытался его отладить, но пока не смог добиться нужного результата. Скрипт вынесен в сами блоки, потому что иначе он почему-то вообще не работал, как будто браузер его не видел. Функция смены видимости блоков "r0" и "r1" работает нормально, так же как и функция, которая меняет параметр "top" у div#bottom (проверено изменением условия). А вот параметр "height" у div#content никак изменить динамически не получается.

[lord2kim]

Я долго пытался его отладить, но пока не смог добиться нужного результата. Скрипт вынесен в сами блоки, потому что иначе он почему-то вообще не работал, как будто браузер его не видел. Функция смены видимости блоков "r0" и "r1" работает нормально, так же как и функция, которая меняет параметр "top" у div#bottom (проверено изменением условия). А вот параметр "height" у div#content никак изменить динамически не получается.

во-первых в условиях

<script type="text/javascript">
    if (document.getElementById("r1").style.display = 'none') document.getElementById("content").style.height = "1100px";
    else document.getElementById("content").style.height = "1484px";
</script>

поставьте == и если изначально свойство height у элемента content не задано, то вы не сможете его изменить

[Squirr]

lord2kim, да, я постоянно забываю ставить равенство в условии вместо присваивания. Высоту div#content я попробовал задать разными способами, но никакого результата не было. При этом значение "top" у div#bottom у меня вообще нигде не задано, однако это условие работает. Я уже не знаю, что тут ещё можно сделать. А функция скрытия части текста на странице должна быть обязательно.
Кстати. Если не писать дополнительный скрипт для сдвига блоков, то значение "height" у div#content изменяется автоматически, только отдельный нижний блок остаётся на своём месте, потому что он там зафиксирован с абсолютным позиционированием.

[Squirr]

Убрал строку с определением высоты блока content. После этого его высота стала меняться автоматически. Так что теперь загвоздка в сдвиге div#bottom. Что-то, видимо, не так в условии, но оно работает. Только отладить его надо. Если я ставлю в условии

if (h < 1450)

, то div#bottom.top = 1620px постоянно, и наоборот.

[Squirr]

Написал функцию проверки значения "height" у div#content. При скрытом тексте 1076, при раскрытом — 1469,8333740234375. Условие, вроде бы правильно составил. Не понимаю, что тут не так.

[Deff]

Squirr,
Мон чисто табличкой верстку забодать и никаких мучений
#content - это сама табла - отступы для ячеек #meny и #banner задаем cellpadding #ro0/#r1 => div блок cо style=width:100%; height:100%;

[Squirr]

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

[bes]

Объясните подробнее какого поведения хотите добиться (опишите поведение каждого из блоков).
Например, пока не понятно представленный на рисунке вид должен оставаться таким в рамках экрана или может прокручиваться, меню имеет постоянную высоту или зависит от содержимого, то же самое про баннер и т.д., также непонятно как это всё должно вести себя при масштабировании.

Deff, таблицу тоже проблематично удержать в рамках экрана при масштабировании (ну или я может быть чего-то не догоняю).

Вот пример

<!doctype html>
<style>
  body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
  }
  table {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%; 
    height: 100%;
  }
  td {
    border: 1px solid gray; 
  }
  table div {
    width: 100%;
    height: 100%; 
    overflow: auto;
  }
</style>

<table>
  <tr>
    <td colspan="2" height="5%">mainMenu</td>
  </tr>
  <tr >
    <td width="30%" height="90%">
      menu
    </td>
    <td width="70%">

<div>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>
</div>

    </td>
  </tr>
  <tr>
    <td colspan="2">bottom</td>
  </tr>
</table>

[Squirr]

bes,
На картинке представлена структура div-ных блоков. #r0 и #r1 — это 2 разных блока с текстом разного объёма, виден в любой момент времени только 1 из них. Соответственно, должна меняться высота блока banner, в котором находится текст (это автоматом происходит, т.к. его высота не определена) и высота блока content (тоже не задана, меняется автоматически). Блок bottom находится отдельно от них. Это нужно, чтобы не нарушать дизайн. У него, соответственно, надо реализовать динамически изменяемое установленное свойство CSS top. Вот этого-то мне добиться и не удалось пока.
В блоке banner основной контент, а не баннер. Название блока перешло по наследству с главной страницы, чтобы не писать лишние стили. Здесь я оставил название, чтобы самому потом не запутаться.

[bes]

Squirr,

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

не на все вопросы ответили (а вариантов развития много)

Как вариант

<style>
  div {
    padding: 0px;
    margin: 1%;
  }
  .menu {
   float: left;
    width: 30%;
    background: lightgrey;
  }  
  #banner {
    padding: 10px;
    float: left;
    width: 63%;
    background: green;
  }  
  #banner div {
    background: lightgrey;
  }
  .bottom {
    clear: both;
    background: gray;
  }
  
</style>

<div class="content">

  <div class="menu">
<a href="#" 
  onclick="
    banner.children[i].style.display = 'none';
    banner.children[j].style.display = 'block';
    k = i; i = j; j = k;
    return false;
">
menu</a>
</div>

  <div id="banner">
    <div>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
   </div>
    <div style="display: none">content2<br>content2</div>
  </div>

</div>

<div class="bottom">
bottom
</div>

<script>
  var i = 0;
  var j = 1;
  var k;
</script>