CSS - 사업부가 남아있는 수직 공간을 채우기 갖는 것은

Question

여기 데모 참조하십시오 http://puu.sh/3YwRt.png

JSFiddle : 나는 사이드 바에서 채팅과 같은 outlook.com를 만들기 위해 노력하고 http://jsfiddle.net/elvista/7LBcr/2/

합니다.

나는 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 : 바이올린에 표시된 것처럼 #chathistory의 top 스타일을 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

"doable"이기 때문에 직접 해보겠습니다. 당신이해야 할 수도 있습니다

모든 코드는 : 이제

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

, 당신이 할 기본적 할 것은 다음 #chathistory의 높이를 얻기 위해 모든 위젯의 높이를 빼지, 사이드 바의 overhall 높이를 얻을 수있다 . #chathistory 위의 모든 위젯 높이의 합계와 같도록 "top"을 수정합니다.

즐기십시오!

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>