CODEWITHSUNDEEP
javascriptcssangularjsuser-interfaceuser-experience
Non
Non

Reputation: 8599

how to change the height of an element depending on the window / document height?

I have an element that I need to dynamically change his size depending on the screen resolution, so far I have a fixed size which is .scroll-sidebars { max-height: 650px; } but this only works in big screens, as you see in the img below, there is a little margin on the bottom, that's what I want

enter image description here

if I use that same height on smaller screens, this is what I get

enter image description here

so I want to avoid that, it doesn't matter that once the height of that panel changes appears a scroll bar on the panel, that is good, all I need is to keep that margin always there at the bottom.

I have a directive, this is an sticky sidebar, I do not know if its helps because maybe we can calculate that height from the directive

.directive('sticky', function($document, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      var width = $document.width();
      if (width > 991) {
        $timeout(function() {
          angular.element($document).ready(function() {
            var stickySidebar = element,
                stickyHeight,
                sidebarTop,
                scrollTop,
                stickyStop,
                sidebarBottom,
                stopPosition;

            if (stickySidebar.length > 0) {
              stickyHeight = stickySidebar.height();
              sidebarTop = stickySidebar.offset().top;
            }

            $document.scroll(function() {

              if (stickySidebar.length > 0) {
                scrollTop = $document.scrollTop() + 52; //stkicy responds to the navbar
                if (sidebarTop < scrollTop) {
                  stickySidebar.css('top', scrollTop - sidebarTop);
                  sidebarBottom = stickySidebar.offset().top + stickyHeight;
                  stickyStop = $('.main-content').offset().top + $('.main-content').height();
                  if (stickyStop < sidebarBottom) {
                    stopPosition = $('.main-content').height() - stickyHeight;
                    stickySidebar.css('top', stopPosition);
                  }
                }
                else {
                  stickySidebar.css('top', '0');
                }
              }
            });
            $document.resize(function() {
              if (stickySidebar.length > 0) {
                stickyHeight = stickySidebar.height();
              }
            });

          });
        }, 1000);
      }else {
        console.log('do not apply function because the size is not the proper one');
      }
    }
  };
});

and the html part

  <div class="col-md-3">
    <div sticky>
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Sports</h3><br>
        </div>
        <div class="panel-group">
          <div class="scroll-sidebars">
            <accordion close-others="false">
              <accordion-group ng-repeat="sport in sports">
                <accordion-heading>
                  <div>
                    {{::sport.name}}
                  </div>
                </accordion-heading>
                <div>
                     {{::league.name}}
                </div>
              </accordion-group>
            </accordion>
          </div>
        </div>
      </div>

Upvotes: 1

Views: 831

Answers (4)

Dan Rocha
Dan Rocha

Reputation: 635

You can use vh on your css, no need to use JS, however, if you need support for old browsers you'll need JS :(

.scroll-sidebars {
  height: 100vh;
}

Upvotes: 1

Michel
Michel

Reputation: 28359

You could use the function calc assuming you do not care about old browsers not supporting it :

.scroll-sidebars { 
    max-height: calc(100% - 50px); 
}

The above rule will set the height to 100% of the container's height, minus 50px (adjust this value to your needs).

You could define a height according to the viewport height. The viewport is the visible portion of the document. Note that you can use it with these browsers. The following makes use of the vh unit, which stands for viewport height.

.scroll-sidebars { 
    max-height: calc(100vh - 100px);
}

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Instead of $document.resize() use $window.onresize which is pure javascript onresize event. Before doing this add $window dependency

CODE

$window.onresize = function() {
    if (stickySidebar.length > 0) {
      stickyHeight = stickySidebar.height();
    }
};

Hope this could help you, Thanks.

Upvotes: 1

berv63
berv63

Reputation: 19

.scroll-sidebars { max-height: 90%; }

Defining a px number will always cause the section to take up that many pixels. No matter the screen size. so if I have a large screen with a low resolution, the same issue occurs.

When using percentages, the CSS uses the browser's height and width to determine how large to make the containing section.

Upvotes: 1

Related Questions