如何动态设置元素高度？答案

【问题标题】：how to set dynamically height to element?如何动态设置元素高度？
【发布时间】：2015-08-13 09:08:18
【问题描述】：

我试图在我的演示中为元素动态设置高度。我会告诉你我在演示中采用静态或恒定高度值的问题。我采用 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 高度的静态值。我想动态添加。

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

我需要在 Angular 中做我们在 jquery 中做的同样的事情

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

【问题讨论】：

在什么条件下您需要将该高度添加到元素..& 它应该在什么基础上计算？
当视图加载..我需要设置 $window.innerHeight/3;到包装器高度。意味着当我运行应用程序时，我得到了窗口高度的值。然后设置包装器高度的值
可以添加你的html吗？
对不起，我忘了提供html代码codepen.io/anon/pen/bdgawo
检查我添加的答案..谢谢:)

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案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>

Working Codepen

【讨论】：

嗨，你能帮我解决这个问题吗？ stackoverflow.com/q/33997547/4044949
没有像素就无法工作。应该是：element.css('height', $window.innerHeight/3 + 'px');
正确..感谢您的提醒.. ;) 但我认为它应该可以工作..因为 codepen 正在工作..更新答案..看看它。

【解决方案2】：

以下应该有效。将其放入 codepen sn-p 将不会显示，因为窗口大小很小，因此它从 min-height 属性中绘制高度。在更大的窗口上进行测试。

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

【讨论】：

您介意更新 codepen 吗？它在codepen中不起作用的原因是什么？
我没有说它不适用于 Codepen。高度设置不会显示，因为 Codepen 上的窗口高度是 260 像素，除以 3 得到高度为 86.67。但是最小高度是 250px，所以演示不会成功。无论如何，这是密码笔codepen.io/anon/pen/xGgYxV。试试看。
此外，Codepen 中 260px 的窗口高度适用于标准分辨率，但可能会有所不同。无论哪种方式，请在完整的浏览器中进行测试。
是什么让你说它不起作用？它似乎工作正常。右键单击元素，然后单击“检查元素”。检查CSS。它将所需的高度附加到元素。
当然。没问题。很高兴我能帮上忙。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

这是一个将其他元素宽度应用于当前元素的示例。

类名为“container”的元素的宽度将使用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' 
             });
            };
   });

【讨论】：