cách đặt chiều cao tự động thành phần tử?

Question

Tôi cố gắng để thiết lập tự động chiều cao đến yếu tố trong bản demo của tôi .Tôi sẽ cho bạn biết hành Tôi đang dùng giá trị tĩnh hoặc liên tục của chiều cao trong bản demo của tôi .Tôi đi 250px giá trị không đổi

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

Nhưng tôi cần để thêm chiều cao này động .Tôi có chiều cao từ này

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

Nhưng tôi cần phải đặt $ scope.hgt để min-height để #wrapper div động? .Tôi không muốn mất giá trị tĩnh của chiều cao div. Tôi muốn thêm động.

đây là mã của tôi http://codepen.io/anon/pen/bdgawo

cùng điều tôi cần phải ở góc những gì chúng ta làm trong jquery

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

Answer 1

Bạn chỉ có thể đạt được điều này bằng cách chỉ thị riêng mà sẽ thêm css động

Đánh dấu

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

Chỉ

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

Giải pháp tốt hơn là bạn có thể sử dụng chỉ thị ng-phong cách mà hy vọng các giá trị trong định dạng JSON.

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

Working Codepen

Answer 2

Sau đây nên làm việc. Đặt nó trong đoạn mã codepen sẽ không hiển thị vì kích thước cửa sổ nhỏ nên nó vẽ chiều cao từ thuộc tính min-height. Kiểm tra nó trên một cửa sổ lớn hơn.

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

Answer 3

đặt chiều cao động với chân trang đầu phần tử? 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

Dưới đây là một ví dụ cho việc áp dụng các yếu tố khác chiều rộng đến yếu tố hiện tại.

Chiều rộng của phần tử trong đó có các tên lớp "container" sẽ áp dụng đối với div sử dụng flexibleCss js góc chỉ

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