CSS: снизу: 0, но относительно сверху

Question

Кажется, я не могу правильно найти мои условия поиска, чтобы найти ответ.

У меня есть postion:fixed; div, он заполняет страницу: bottom 5px; top: 5px right: 5px; width 300px; внутри у меня -

секция с вкладками (изменяет высоту)
центральная секция (в основном такая же высота)
нижняя секция (это журнал, он изменяется)

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

<div id="rightc" class="fr">

<!-- Top Section -->
<h3>Admin Functions</h3>
    <ul class="tabs">
        <li><a href="#Payment">Payment</a></li>
        <li><a href="#Fees">Fees</a></li>
        <li><a href="#Payoff">Payoff Request</a></li>
        <li><a href="#Close">Close</a></li>
    </ul>

<div class="tab_container">
   <!-- tab divs are here and the height changes depending on the tab (jquery)-->
</div>

<!-- Center Section -->
<h3>Loan Summary</h3>
<ul>
       <!-- small list of items doesnt change -->
</ul>

<!-- Transaction log -->
<h3>Payments & Fees Log:</h3>
<div id="payments">
       <!-- log items here -->
</div>  

Answer 1

Я думаю, вам понадобится функция javascript, это очень уродливый пример

<div class="tab_container" id="foo">

поместите это в голову или .js

function bar(){

  var i = initial height of your tab container

  var x = document.getElementById('foo').offsetHeight

  var y = document.getElementById('payments').offsetHeight

  if(x>i){ 
  var z= x-i; 
  var a = y-z;
  document.getElementById('payments').height="'a'+'px'";
  }
}

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

[edit]

работает примерно, я добавил еще один IF для других вкладок, когдавыбран.Исправлено: (style.height)

            function divHeight(){
              var container_height = 100;
              var payments_height = 247;
              var x = document.getElementById('food').offsetHeight;
              var y = document.getElementById('payments').offsetHeight;

                if(x > container_height && y ==  payments_height ){ 
                    var z = x - container_height; 
                    var a = y - z + "px";
                    document.getElementById('payments').style.height = a ;  
                }

                if(x < container_height){
                    var a = payments_height - 12 + "px";
                    document.getElementById('payments').style.height = a ;
                }
            }

А как насчет обнаружения окна браузера и работы с блочной моделью?

(- 12 имеет дело с пэдом 5px и границей 1px)