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

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 设置为 #wrapper div 的最小高度。我不想使用固定的div高度，我希望在代码中动态添加。

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

我需要在Angular中执行与jQuery相同的操作。

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

- user944513

---

在什么情况下需要将高度添加到元素中？以什么为基础进行计算？ - Pankaj Parkar

当视图加载时，我需要将 $window.innerHeight/3; 设置为包装器高度。也就是说，当我运行应用程序时，获取窗口高度的值，然后设置包装器高度的值。 - user944513

请问您能否添加您的HTML代码？ - Pankaj Parkar

你添加在哪里了？能否回答一下这个问题？ - user944513

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Pankaj Parkar

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);
    }
  }
})

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

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

工作中的 Codepen

- Pankaj Parkar

---

你好，能帮我解决这个问题吗？https://dev59.com/91sX5IYBdhLWcg3wS907 - SA__

没有px就无法工作。应该是： element.css('height', $window.innerHeight/3 + 'px'); - Damjan Pavlica

没错，谢谢提醒 ;) 但我认为它应该可以工作..因为CodePen是可以工作的..已更新答案..请看一下。 - Pankaj Parkar

Answer 2

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

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

- srthu

---

你介意更新CodePen吗？还有为什么它在CodePen上不能工作的原因是什么？ - Pankaj Parkar

我并没有说它在Codepen上不起作用。高度设置不会显示，因为Codepen窗口的高度为260px，将其除以3，得到的高度为86.67。但是最小高度为250px，所以演示将不成功。无论如何，这是codepen链接http://codepen.io/anon/pen/xGgYxV。试一下吧。 - srthu

此外，Codepen 中的窗口高度为 260px 是针对标准分辨率的，但实际情况可能会有所不同。无论如何，请在完整的浏览器中进行测试。 - srthu

你为什么说它不起作用？它看起来运行良好。右键单击元素，然后单击“检查元素”。检查CSS。它将所需的高度附加到元素上。 - srthu

当然，没问题。很高兴能帮到你。 - srthu

Answer 3

这里有一个将其他元素的宽度应用到当前元素的示例。

具有类名“container”的元素的宽度将使用flexibleCss AngularJS指令应用于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' 
             });
            };
   });

- ramesh

Answer 4

如何为元素动态设置高度，使其包含页眉和页脚？ 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()));
            }
        }
    }
})

- Chirag Suthar