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

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

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

定义px编号将始终使该部分占用那么多像素。无论屏幕大小。因此，如果我的屏幕分辨率较低，则会出现同样的问题。

使用百分比时，CSS使用浏览器的高度和宽度来确定包含部分的大小。

Answer 2

您可以使用函数calc，假设您不关心old browsers not supporting it：

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

以上规则将高度设置为容器高度的100％，减去50px（根据需要调整此值）。

您可以根据视口高度定义高度。视口是文档的可见部分。请注意，您可以将其与these browsers一起使用。以下内容使用vh单位，代表视口高度。

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

Answer 3

而不是$document.resize()使用$window.onresize这是纯粹的javascript onresize事件。在此之前添加$window依赖

<强> CODE

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

希望这可以帮助你，谢谢。

Answer 4

你可以在你的CSS上使用vh，不需要使用JS，但是，如果你需要支持旧的浏览器，你需要JS：（

.scroll-sidebars {
  height: 100vh;
}