javascript - 如何根据窗口/文档高度更改元素的高度？

Question

我有一个元素，我需要根据屏幕分辨率动态改变他的大小，到目前为止，我有一个固定的大小，它是 .scroll-sidebars { max-height: 650px; 但这只适用于大屏幕，正如您在下面的 img 中看到的那样，底部有一点边距，这就是我想要的

如果我在较小的屏幕上使用相同的高度，这就是我得到的结果

所以我想避免这种情况，一旦该面板的高度发生变化，面板上会出现一个滚动条并不重要，这很好，我需要的是始终保持底部的边距。

我有一个指令，这是一个粘性侧边栏，我不知道它是否有帮助，因为也许我们可以根据指令计算高度

.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');
      }
    }
  };
});

和html部分

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

Answer 1

您可以在您的 css 上使用 vh，无需使用 JS，但是，如果您需要对旧浏览器的支持，您将需要 JS :(

.scroll-sidebars {
  height: 100vh;
}