可變高度與自動溢出

Question

我正在應用在兩個div使用高度100％溢出。我有兩個jsfiddle。一個很好，一個不行。當然，我需要做第二個選項。 Theese是兩個的jsfiddle：

1）http://jsfiddle.net/T3qF8/96/（它的工作原理） 2）http://jsfiddle.net/8y48q/29/（未作品）

兩個示例之間的唯一區別在於，在第二i使用的UIKit。可能是問題？這裏的方式代碼第二的jsfiddle：

html, body { 
 
    margin: 0; padding: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#header_with_dynamic_height { 
 
    background-color: #fafafa; 
 
    height:30px; 
 
    float: left; width: 50%; 
 
} 
 
#remaining_height_with_scrollbar { 
 
    background-color: #009688; 
 
    height: 100%; 
 
    overflow: auto; 
 
    width: 100%; 
 
    float: right;  
 
    padding-left:10px; 
 
    /* If you change this to "scroll" or "auto", the content disappears */ 
 
} 
 

 
#remaining_height_with_scrollbar_left { 
 
    background-color: #F44336; 
 
    height: 100%; 
 
    overflow: auto; 
 
    width: 100%; 
 
    float: left; 
 
    padding-left:10px; 
 
    /* If you change this to "scroll" or "auto", the content disappears */ 
 
}

<div ng-app="myApp"> 
 
    <div ng-controller="TestCtrl"> 
 
    <nav id="header_with_dynamic_height" class="uk-nav"> 
 
     <ul> 
 
     <li>Test</li> 
 
     </ul> 
 
    </nav> 
 

 
    <div class="tabs-content"> 
 
     <ul class="uk-tab" data-uk-tab> 
 
     <li class="uk-active"><a href="">...</a> 
 
     </li> 
 
     <li><a href="">...</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="uk-width-1-1"> 
 
     <div class="uk-grid"> 
 
     <div class="uk-width-1-2"> 
 
      <div id="remaining_height_with_scrollbar_left"> 
 
      Here 
 
      <br/>should 
 
      <br/>be 
 
      <br/>a 
 
      <br/>scrollbar. 
 
      <br/>But 
 
      <br/>the 
 
      <br/>content 
 
      <br/>overlaps. 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      </div> 
 
     </div> 
 
     <div class="uk-width-1-2"> 
 
      <div id="remaining_height_with_scrollbar"> 
 
      Here 
 
      <br/>should 
 
      <br/>be 
 
      <br/>a 
 
      <br/>scrollbar. 
 
      <br/>But 
 
      <br/>the 
 
      <br/>content 
 
      <br/>overlaps. 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      <br/>1 
 
      <br/>2 
 
      <br/>3 
 
      <br/>4 
 
      <br/>5 
 
      <br/>6 
 
      <br/>7 
 
      <br/>8 
 
      <br/>9 
 
      <br/>10 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

感謝

Answer 1

你的jsfiddle鏈接加載jQuery框架了。 你可以做這這種方式，因爲CSS將在這裏沒有堅實的，跨瀏覽器解決方案：

$(window).load(function() { 
    var colH = $(window).height(); 
    var headerH = $(".uk-nav").height(); 
    $('.uk-width-1-2> div ').css('height', colH - headerH -10 + "px"); 
}); 

fiddle update從第二小提琴