AngularJS/CSS（No jQueryなし）を使用して特定の高さの高さを計算する方法

Question

AngularJS newbieここに。 AngularJSやCSSを使用してページ内の特定の領域を計算する方法はありますか？

基本的に私が達成しようとしているのは、ナビゲーションメニューの最後の項目の下の空白を埋めることです。私はそれがフッターと重なり合うのは嫌です。私が計算したいのは、ユーザーがページをズームアウトするたびに調整する理由です。

これは私の以前の試みであった：

HTML

<div class="blankSpace"> 

CSS

div.blankSpace { 
    background-color: #35444f; 
    background-repeat: repeat-y; 
} 

...しかし、このうまくいかなかった。

どのようなヒントも非常に高く評価されます。

ありがとうございます。

Answer 1

これは、css3またはAngularディレクティブを使用して実行できます。

// CSS

//あなたのヘッダーとフッターの高さがそれぞれ100pxにしていると仮定します。

#sidebar { 
height: -moz-calc(100% - (100px + 100px)); 
height: -webkit-calc(100% - (100px + 100px)); 
height: calc(100% - (100px + 100px)); 

}

yourAppName.directive('sidebar', ['$document', '$window', function ($document, $window) { 

    return { 
     restrict: 'AE', 
     link: function (scope, element, attrs) 
     { 
      angular.element(document).ready(function() { 
       var headerHeight = 100px; 
       var footerHeight = 100px; 

       var d = $document.height() - headerHeight - footerHeight; 


       scope.changeHeight = function() { 
        element.css('min-height', d); 
        console.log(d); 
       }; 
       scope.changeHeight(); 
      }); 
     } 
    }; 
}]); 

// HTMLコードまたは指令

<aside sidebar></aside>