可变高度与自动溢出

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从第二小提琴