Question

我要使用100％的高度在两个div中应用溢出。我有两个jsfiddle。一个很好用，第二个不行。当然，我需要使用第二个选项做我想要的。 Theese是两个jsfiddle：

1）http://jsfiddle.net/T3qF8/96/（有效） 2）http://jsfiddle.net/8y48q/29/（不起作用）

两个例子之间的唯一区别是在第二个我使用的uikit。可能是问题？顺便说一句，来自第二个jsfiddle的代码：

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

感谢

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

可变高度，自动溢出

1 个答案: