Question

我想在我的演示中设置动态高度为元素。我会告诉你问题我在我的演示中采用静态或恒定的高度值。我取 250px 常数值

 #wrapper{
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
    min-height: 250px;
    background-repeat: no-repeat; 
}

但是我需要动态添加这个高度。我从这个

获得了高度

$scope.hgt =$window.innerHeight/3;
alert($scope.hgt)

但我需要将 $ scope.hgt 设置为min-height到#wrapper div动态吗？。我不想取div高度的静态值。我想动态添加。< / p>

这是我的代码 http://codepen.io/anon/pen/bdgawo

同样的事情我需要在jquery

中做角度

$('#wrapper').css('height': $window.innerHeight / 3)

Answer 1

你可以通过自动指令来实现这一点，这将动态添加css

<强>标记

<div id="wrapper" set-height>
  <h4 class="headerTitle">tell Mother name</h4>
</div>

<强>指令

.directive('setHeight', function($window){
  return{
    link: function(scope, element, attrs){
        element.css('height', $window.innerHeight/3 + 'px');
        //element.height($window.innerHeight/3);
    }
  }
})

更好的解决方案是你可以使用期望JSON格式值的ng-style指令。

<div id="wrapper" ng-style="{height: hgt+ 'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

Working Codepen

Answer 2

以下内容应该有效。将它放在codepen代码段中将不会显示，因为窗口大小很小，因此它从min-height属性中绘制高度。在更大的窗口上测试它。

<div id="wrapper" style="height: {{ hgt }}px" >
    <h4 class="headerTitle">tell Mother name</h4>
<div>

Answer 3

使用页眉页脚设置动态高度到元素？的 HTML

<div class="content-wrapper" win-height> </div>

<强> JS

app.directive('winHeight', function ($window) { return{ link: function (scope, element, attrs) { angular.element(window).resize(function () { scope.winHeight(); }); setTimeout(function () { scope.winHeight(); }, 150); scope.winHeight = function () { element.css('min-height', angular.element(window).height() - (angular.element('#header').height() + angular.element('#footer').height())); } } } })

Answer 4

以下是将其他元素宽度应用于当前元素的示例。

具有类名“容器”的元素的宽度将使用flexibleCss angular js指令应用于div

<div flexible-width widthof="container">
</div>

myApp.directive('flexibleWidth', function(){

    return function(scope, element, attr) {
            var className = attr.widthof; 
            var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth;
            element.css({ 
                 width: classWidth+ 'px' 
             });
            };
   });

如何设置动态高度到元素？

4 个答案: