Variable height with auto overflow

Question

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

the first doesn't work either, a part as high as header diseapear at bottom. You could achieve this via display:flex; — G-Cyrillus
– G-Cyrillus, Commented Mar 24, 2015 at 21:42
What? really? not works? This is strange! but, the flex component (tell me if i'm wrong) doesn't work always and in all browser..right? — Atlas91
– Atlas91, Commented Mar 24, 2015 at 21:47
flex would make it easy only with later browser you are right about this, for the first : jsfiddle.net/T3qF8/97 can you see bottom of scrollbar or the latest content ? :( but the best and solid solution is to use javascript and allow content to scroll if javascript is not avalaible , just in case — G-Cyrillus
– G-Cyrillus, Commented Mar 24, 2015 at 22:00
have you tryied jQuery to retrieve windows.height and set style to to the gridminus header's height ? (i believe uikits works with jQuery) — G-Cyrillus
– G-Cyrillus, Commented Mar 24, 2015 at 22:18

G-Cyrillus · Accepted Answer · 2015-03-24 22:39:26Z

1

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

answered Mar 24, 2015 at 22:39

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Atlas91 Over a year ago

Yes nice! Could be the solution! Thank you! And if you maybe have an angularjs solution can you post it? Thanks

G-Cyrillus Over a year ago

@End.Game take a look at the faq , for instance $(window).height(); would be $window.height; ;) , should quiet simple to rewrite with angular syntax

Collectives™ on Stack Overflow

Variable height with auto overflow

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related