तत्व के लिए गतिशील रूप से ऊंचाई कैसे सेट करें?

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) 

से ऊंचाई मिल गया लेकिन मैं मिन-ऊंचाई तक #wrapper को div गतिशील? मैं नहीं के स्थिर मूल्य ले जाना चाहते $ scope.hgt निर्धारित करने की आवश्यकता div ऊंचाई। मैं गतिशील रूप से जोड़ना चाहता हूँ।

यहाँ मेरी कोड http://codepen.io/anon/pen/bdgawo

एक ही बात मैं कोणीय में करने की जरूरत है कि हम क्या jQuery में क्या

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

Answer 1

आप बस सीएसएस गतिशील

जोड़ देगा जो खुद के निर्देश से इस लक्ष्य को हासिल कर सकता है मार्कअप

<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 प्रारूप में मूल्यों की उम्मीद इस्तेमाल कर सकते हैं होगा।

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

Working Codepen

Answer 2

निम्नलिखित काम करना चाहिए। इसे कोडपेन स्निपेट में डालने से नहीं दिखाया जाएगा क्योंकि खिड़की का आकार छोटा है, इसलिए यह न्यूनतम ऊंचाई विशेषता से ऊंचाई खींचता है। एक बड़ी खिड़की पर इसका परीक्षण करें।

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

Answer 3

हेडर फ़ूटर के साथ गतिशील रूप से ऊंचाई सेट करें? एचटीएमएल

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

Answer 4

यहाँ अन्य तत्वों वर्तमान तत्व के लिए चौड़ाई लागू करने के लिए एक उदाहरण है।

तत्व है जो वर्ग के नाम है की चौड़ाई "कंटेनर" क्या हालत आप तत्व है कि ऊंचाई जोड़ने की जरूरत पर flexibleCss कोणीय जे एस निर्देश

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