如何设置动态高度到元素？ [英] how to set dynamically height to element?

问题描述

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

I am trying to set dynamically height to element in my demo .I will tell you issue I am taking static or constant value of height in my demo .I take 250px constant value

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

但我需要动态添加这个高度。我从这里得到了高度

But I need to add this height dynamically .I got height from this

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

但我需要设置 $ scope .hgt 动态地将min-height转换为#wrapper div。我不想取div高度的静态值。我想动态添加。

But I need to set $scope.hgt to min-height to #wrapper div dynamically?.I don't want to take static value of div height .I want to add dynamically .

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

同样的事情，我需要在角度我们在jquery做什么

same thing i need to in angular what we do in jquery

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

推荐答案

您可以通过自动指令实现此目的，该指令将动态添加css

You could simply achieve this by own directive which will add css dynamically

标记

<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指令格式。

The better solution would be you could use ng-style directive that expects the values in JSON format.

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

工作Codepen

这篇关于如何设置动态高度到元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！