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

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

假设您不关心 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);
}

Answer 3

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

代码

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

希望对您有所帮助，谢谢。

Answer 4

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

.scroll-sidebars {
  height: 100vh;
}

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

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

javascript

css

angularjs

user-interface

user-experience