CSS - Имея DIV заполнить оставшееся пространство по вертикали

Question

Пожалуйста, смотрите демонстрацию здесь: http://puu.sh/3YwRt.png

JSFiddle: http://jsfiddle.net/elvista/7LBcr/2/

Я пытаюсь сделать outlook.com как чат в боковой панели.

Мне удалось обработать некоторые коды из outlook.com и создать окно чата, похожее на него. Однако у меня есть ограничение, которого у сайта нет. Я не знаю точного верхнего значения #chathistory, потому что у меня может быть один или несколько .widget с переменными высотами, расположенными поверх #chathistory.

По сути, у меня есть этот код:

#chathistory { 
    overflow-y: auto; 
    bottom: 60px; 
    top: 70px; 
    position: absolute; 
} 

И мне нужно, чтобы функционировать без верхнего: значения.

Можете ли это сделать с помощью CSS или мне нужен jQuery? Если последнее, я могу получить некоторые рекомендации о том, как с тех пор, как мои навыки jQuery минимальны в лучшем случае, пожалуйста? Благодарю.

Answer 1

jsFiddle DEMO

Это решение требует jQuery, но позволяет оставить все остальные CSS без изменений и учетные записи для всего остального ".widgets", как вы можете быть на боковой панели. ERRATA: Вы должны удалить стиль top для #chathistory в вашем коде CSS, как видно на скрипке.

var otherWidgets = $('#sidebar').find('.widget').not('#chatbar'); 
var maxBtm = 0; 
$.each(otherWidgets, function (k, v) { 
    var offset = $(this).offset(); 
    var thisBtm = offset.top + $(this).height(); 
    if (thisBtm > maxBtm) { 
     maxBtm = thisBtm; 
     alert(maxBtm); // of course, remove this as you see fit 
    } 
}); 
$('#chatbar').css('top', maxBtm + 1); 
$('#chathistory').css('top', maxBtm + 32); // aha - add this line, as well!! 

Answer 2

Я позволю вам попытаться сделать это самостоятельно, так как это очень «выполнимо».

Весь код вам может понадобиться:

$(element).css('top',X); 
$(element).height(X); // Set height 
$(element).height(); // Get height 

Теперь, что вы в основном будете делать это получить overhall высоту боковой панели, а затем вычитаем высоту каждого виджета, чтобы получить высоту для #chathistory , Затем вы измените «верх» так, чтобы он равнялся сумме каждой высоты виджета над #chathistory.

Наслаждайтесь!

Answer 3

Я думаю, что это то, что вы хотите:

http://jsfiddle.net/tprats108/7LBcr/3/

CSS:

#chatbar { 
    height: 100%; // This is pretty much the main difference (also removed top) 
} 

.first { 
    height: 30px; 
} 
#sidebar, #chathistory, textarea { 
    width:300px; 
} 
#sidebar { 
    position:fixed; 
    display:block; 
    right:0; 
    top:0; 
    bottom:0 
} 
.widget { 
    background: #eee; 
    margin: 10px 0 
} 
#chathistory { 
    overflow-y: auto; 
    bottom: 60px; 
    position: absolute; 
} 
textarea { 
    bottom:0; 
    right:0; 
    height:50px; 
    position:absolute; 
} 

HTML: (я не думаю, что я изменил его в сторону от уборки его)

<div id="sidebar"> 
    <div class="widget first">Variable content</div> 
    <div class="widget" id="chatbar"> 
     <span class="username">John Doe</span> 
     <div id="chathistory"> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
      <div class="msgs">This is a sample chat msg. Lorem Ipsum</div> 
      <div class="msgs">This is a sample chat msg. Dolor Sit</div> 
      <div class="msgs">This is a sample chat msg. Amet Confus</div> 
     </div> 
     <textarea rows="1" cols="30"></textarea> 
    </div> 
</div>