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

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%; }

定义一个像素数总是会导致该部分占用那么多像素。不管屏幕大小。所以如果我有一个低分辨率的大屏幕，也会出现同样的问题。

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

Answer 2

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

.scroll-sidebars {
  height: 100vh;
}

Answer 3

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

代码

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

希望对你有帮助，谢谢。

Answer 4

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

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

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

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

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