引导动态高度在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

回答

相关问题