Q:

Variable height with auto overflow

I'm tring to apply a overflow in two div using as height 100%. I have two jsfiddle. One it works well, the second not. Of course i need do what i want using second option. Theese are the two jsfiddle:
1) http://jsfiddle.net/T3qF8/96/  (it works)
2) http://jsfiddle.net/8y48q/29/ (not works)
The only difference between two example is that in the second i used uikit. Could be the problem? by the way here code from second 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>

thanks

A:

Your jsfiddle link loads the jQuery framework too. 
you could do this this way since CSS will have no solid and cross browser solution here:
$(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 from your second fiddle

