एक DIV गतिशील

Question

की ऊंचाई की स्थापना एक वेब अनुप्रयोग में, मैं एक पृष्ठ है कि एक DIV ब्राउज़र विंडो की चौड़ाई के आधार पर एक स्वत: चौड़ाई है कि शामिल है।

मैं वस्तु के लिए स्वत: ऊंचाई की जरूरत है। डीआईवी शीर्ष स्क्रीन से लगभग 300 पीएक्स शुरू होता है, और इसकी ऊंचाई ब्राउज़र स्क्रीन के नीचे तक फैली हुई है। मेरे पास कंटेनर डीआईवी के लिए अधिकतम ऊंचाई है, इसलिए div के लिए न्यूनतम ऊंचाई होना आवश्यक है। मेरा मानना ​​है कि मैं इसे केवल सीएसएस में प्रतिबंधित कर सकता हूं, और डीवीवी के आकार को संभालने के लिए जावास्क्रिप्ट का उपयोग कर सकता हूं।

मेरे जावास्क्रिप्ट लगभग रूप में अच्छा के रूप में यह होना चाहिए नहीं है। क्या कोई आसान स्क्रिप्ट है जिसे मैं लिख सकता हूं जो मेरे लिए ऐसा करेगा?

संपादित करें: डीआईवी में एक नियंत्रण है जो अपने स्वयं के ओवरफ्लो हैंडलिंग (अपनी स्क्रॉल बार लागू करता है) करता है।

Answer 1

में यह आसान प्रयास किया है, विशेष समारोह:

function resizeElementHeight(element) { 
    var height = 0; 
    var body = window.document.body; 
    if (window.innerHeight) { 
     height = window.innerHeight; 
    } else if (body.parentElement.clientHeight) { 
     height = body.parentElement.clientHeight; 
    } else if (body && body.clientHeight) { 
     height = body.clientHeight; 
    } 
    element.style.height = ((height - element.offsetTop) + "px"); 
} 

यह शरीर के ऊपर से वर्तमान दूरी पर निर्भर नहीं करता निर्दिष्ट किया जा रहा (मामले आपके 300px परिवर्तन में)।

---

संपादित करें: वैसे, आप हर बार उपयोगकर्ता ब्राउज़र के आकार बदल गया है, कि div पर इस कॉल करने के लिए ताकि आप उस के लिए ईवेंट हैंडलर ऊपर तार की निश्चित रूप से, की आवश्यकता होगी चाहते हैं।

Answer 2

अतिप्रवाह के मामले में क्या होना चाहिए? आप यह सिर्फ खिड़की के नीचे करने के लिए प्राप्त करना चाहते हैं, पूर्ण स्थिति का उपयोग करें:

div { 
    position: absolute; 
    top: 300px; 
    bottom: 0px; 
    left: 30px; 
    right: 30px; 
} 

यह नीचे से स्क्रीन के शीर्ष, और फ्लश से प्रत्येक पक्ष, 300px से में DIV 30px डाल देंगे। सामग्री को प्रसारित करने के लिए overflow:auto; जोड़ें जहां सामग्री div से बड़ी है।

---

संपादित करें: @Whoever इस नीचे चिह्नित, एक स्पष्टीकरण अच्छा होगा ... कुछ जवाब के साथ गलत है?

Answer 3

DIV एक नियंत्रण है कि यह खुद अतिप्रवाह से निपटने है करता है घरों।

Answer 4

तो मैं समझता हूँ कि तुम क्या कह रहे हैं, इस चाल करना चाहिए:

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight 

var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("yourDiv").height = windowHeight - 300 + "px"; 

Answer 5

document.getElementById('myDiv').style.height = 500;

इस गतिशील रूप से अपने वस्तु की ऊंचाई को समायोजित करने के लिए आवश्यक बहुत ही बुनियादी जे एस कोड है। मैंने अभी यह काम किया है जहां मेरे पास कुछ ऑटो ऊंचाई संपत्ति थी, लेकिन जब मैं XMLHttpRequest के माध्यम से कुछ सामग्री जोड़ता हूं तो मुझे अपने मूल div का आकार बदलने की आवश्यकता होती है और इस ऑफ़सेटहाइट संपत्ति ने आईई 6/7 और एफएफ 3

Answer 6

में छोटे सुधार के साथ:

function rearrange() 
{ 
var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop - 6)+ "px"; 
} 

Answer 7

सरल मैं ऊपर आ सकता है ...

function resizeResizeableHeight() { 
    $('.resizableHeight').each(function() { 
     $(this).outerHeight($(this).parent().height() - ($(this).offset().top - ($(this).parent().offset().top + parseInt($(this).parent().css('padding-top'))))) 
    }); 
} 

अब तुम सब करने की है सब कुछ आप AutoSize को (यह करना चाहते हैं resizableHeight वर्ग को जोड़ने है माता-पिता)।

Answer 8

@ से प्रेरित जेसन-ध्वज पट्ट या तो ऊंचाई या चौड़ाई के लिए एक ही बात:

function resizeElementDimension(element, doHeight) { 
    dim = (doHeight ? 'Height' : 'Width') 
    ref = (doHeight ? 'Top' : 'Left') 

    var x = 0; 
    var body = window.document.body; 
    if(window['inner' + dim]) 
    x = window['inner' + dim] 
    else if (body.parentElement['client' + dim]) 
    x = body.parentElement['client' + dim] 
    else if (body && body['client' + dim]) 
    x = body['client' + dim] 

    element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px"); 
}