引導動態高度在navibar

我是bootstrap和angularJS新手。但我正在建立頁面的頂部和左側頁面將靜態不移動。我使用<nav class="navbar navbar-default navbar-fixed-top從引導到頭和position: fixed有靜態頁面的左側部分。
問題是navibar是動態創建的，高度取決於來自數據庫的數據（這些是過濾器），所以結果我有我的標題和內容中的一些數據不可見，因爲navbar覆蓋它。如何解決？也許導航欄不是好的方法。引導動態高度在navibar

來源

2015-07-22 user2123523

你可以用navbar和sidebar編寫HTML的一部分嗎？ –

使用[JSFiddle]（https://jsfiddle.net/）來演示您的問題並將url鏈接到您的問題。例如，2個導航欄，其中一個的濾鏡適合您的導航欄的高度，另一個則會遇到您遇到的問題。 –

我重建下面的例子，這是更少的結果我想要的;-) http://plnkr.co/edit/fi1v0oVdSssObw2qyQqc?p=preview – user2123523

我會這樣做兩個指令。一個監視元素（在你的情況下導航欄）的高度和一個改變CSS填充（或任何你想要的）取決於新的高度。

.directive('getHeight', function() { 
    var addPadding = 10; 
    return { 
     link: function(scope, element, attrs) { 
      scope.$watch('watchedHeight', function(newHeight) { 
       element.css({ 
        'padding-top': newHeight+addPadding+'px' 
       }); 
      }); 
     } 
    } 
}) 

.directive('watchHeight', function($rootScope) { 
    return { 
     link: function(scope, element, attrs) { 
      scope.$watch(function() { 
       scope.watchedHeight = element[0].offsetHeight; 
      }); 

      angular.element(window).on('resize', function() { 
       $rootScope.$apply(function() { 
       scope.watchedHeight = element[0].offsetHeight; 
       }) 
      }); 
     } 
    } 

});

HTML：

<body ng-app="myApp" ng-controller="TestCtrl" get-height=""> 
    <nav class="navbar navbar-default navbar-fixed-top" watch-height=""> 
     <div class="container"> 
     <p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p> 
     </div> 
    </nav> 
    <div class="container"> 
     Lorem ipsum dolor sit amet... 
    </div> 
    </body>

我還監視窗口大小調整，如果它需要你的情況不知道。

http://plnkr.co/edit/AGdhZBiCfbH8GbU3y3Yy

來源

2015-07-22 08:40:13 BastianW

謝謝。你很棒 ;-） – user2123523

引導動態高度在navibar

回答

相關問題