javascript - 如何使用 Angular 设置列高以包括整个窗口和所有内容？

Question

如何将列的高度设置为窗口的高度以及所有包含内容的高度。我尝试了很多解决方案(css、jquery、javascript)，但它们似乎都不适合我。

当前结果:列占据了窗口的高度，但是当滚动经过窗口时，背景颜色被 chop 了。

预期结果:该列填满整个窗口的高度，这样当我滚动时，背景颜色仍然完全延伸到窗口底部。

我做了一个 plnkr 来显示当前设置(注意背景颜色不会超过窗口高度):http://plnkr.co/edit/N9obSNozCC8WNyTA1Fqo?p=preview

//using a directive
.directive('fullHeight', function($window) {
      return {
        restrict: 'A',
        link: function(scope, el, attrs) {
          function setHeight() {
            var windowHeight = document.documentElement.clientHeight;
            $('.col').css('height', windowHeight);
          }
          setHeight();

          $(window).resize(function() {
            setHeight();
          });
        }
      };
    });

Answer 1

您可以使用 scrollHeight 而不是 clientheight

var windowHeight = document.documentElement.scrollHeight;

不过，在这种情况下，您可能需要调整该值以适应页眉的高度。