自动溢出的可变高度

Question

我正在尝试使用 100% 高度应用两个 div 的溢出。我有两个 jsfiddle。一个效果很好，第二个效果不好。当然，我需要使用第二个选项做我想做的事。这些是两个 jsfiddle：

1) http://jsfiddle.net/T3qF8/96/（有效） 2) http://jsfiddle.net/8y48q/29/（无效）

两个示例之间的唯一区别是在第二个示例中我使用了 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 link 也会加载 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 来自第二个 fiddle

自动溢出的可变高度

Variable height with auto overflow

html

javascript

css

overflow

uikit