JQuery: गतिशील ऊंचाई() विंडो आकार परिवर्तन()

मैं एक मुद्दा इस पोस्टर के समान हो रही है साथ: Jquery problem with height() and resize()JQuery: गतिशील ऊंचाई() विंडो आकार परिवर्तन()

लेकिन समाधान मेरी समस्या ठीक नहीं होती। मेरे पास तीन स्टैक्ड divs हैं, और मैं मध्य ऊंचाई को ऊंचाई में समायोजित करने के लिए JQuery का उपयोग करना चाहता हूं, अन्य शीर्ष & नीचे divs की ऊंचाई (23px * 2) घटाएं। यह आकार बदलने पर काम करता है, लेकिन जब दस्तावेज़ प्रारंभ में लोड होता है तो यह 16px द्वारा बंद (छोटा) होता है।

एचटीएमएल

<body> 
<div id="bg1" class="bg">top</div> 
<div id="content"> 
    help me. seriously. 
</div> 
<div id="bg2" class="bg">bottom</div> 
</body>

सीएसएस

html, 
body { 
    width:100%; 
    height:100%; 
} 

.bg { 
width:315px; 
height:23px; 
margin:0 auto; 
text-indent:-9000px; 
} 

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;} 
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;} 

#content { 
width:450px; 
margin:0 auto; 
text-align: center; 
}

JQuery

$(document).ready(function(){ 
    resizeContent(); 

    $(window).resize(function() { 
     resizeContent(); 
    }); 
}); 

function resizeContent() { 
    $height = $(window).height() - 46; 
    $('body div#content').height($height); 
}

स्रोत

2011-11-15 Gregir

क्या आप इस तरह कुछ ढूंढ रहे हैं? या पृष्ठ के साथ पाद लेख चलाना चाहिए? http://www.cssplay.co.uk/layouts/basics2.html एक बेवकूफ अच्छा होगा! – mrtsherman

मैं ऐसा कुछ कर सकता था, लेकिन मैं HTML के साथ फंस गया हूं जो सर्वर-साइड जेनरेट किया जाएगा। मुझे JQuery के साथ इस तरह के मुद्दे को हल करने के लिए कहा गया है। – Gregir

9000 पीएक्स टेक्स्ट इंडेंट के साथ क्या है? – mrtsherman

मुझे लगता है कि कोई जावास्क्रिप्ट समाधान नहीं होना चाहिए, लेकिन यह कैसा है?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() { 
    $('#content').height($(window).height() - 46); 
}); 

$(window).trigger('resize');

स्रोत

2011-11-15 03:19:05 mrtsherman

असल में, आप इसे एक ही पंक्ति में कर सकते हैं। यहां तक कि छोटा! – mrtsherman

यह चाल, अजीब रूप से पर्याप्त था। धन्यवाद। – Gregir

https://jsfiddle.net/53hoq9w7/ – Pierre

खिड़की ऊंचाई को देखने के लिए, जबकि (या बाद) यह आकार दिया जाता है, यह प्रयास करें:

$(window).resize(function() { 
$('body').prepend('<div>' + $(window).height() - 46 + '</div>'); 
});

स्रोत

2011-11-15 03:11:45 SuSanda

ठीक है, कैसे एक सीएसएस जवाब के बारे में! हम display: table का उपयोग करते हैं। फिर प्रत्येक divs पंक्तियां हैं, और आखिरकार हम 100% की ऊंचाई को मध्य 'पंक्ति' और voilà पर लागू करते हैं।

http://jsfiddle.net/NfmX3/3/

body { display: table; } 
div { display: table-row; } 
#content { 
    width:450px; 
    margin:0 auto; 
    text-align: center; 
    background-color: blue; 
    color: white; 
    height: 100%; 
}

स्रोत

2011-11-15 03:28:50 mrtsherman

मैन! मुझे पता था कि एक सीएसएस केवल समाधान था! आपने मुझे प्रेरणा दी। दोस्तों, किसी भी जेएस से पहले इस गैर-जेएस समाधान को प्राथमिकता दें। यह उतना साफ नहीं है और आपको कुछ अतिरिक्त मार्क-अप का उपयोग करने की आवश्यकता हो सकती है, लेकिन फिर भी इसके लायक है। –

लोग क्यों सोचते हैं कि सीएसएस हमेशा जेएस से बेहतर है? – barell

@barell यह हमेशा बेहतर नहीं होता है, लेकिन जहां यह प्रस्तुति से संबंधित है, वैसे ही व्यवहार/तर्क को लागू करने के बजाय अकेले स्टाइल का उपयोग करना बेहतर होता है। एक अतिरिक्त लाभ यह है कि सीएसएस डिज़ाइन द्वारा लचीला है, जबकि जावास्क्रिप्ट डिज़ाइन द्वारा भंगुर है। –

साफ समाधान - यह भी विशुद्ध रूप से सीएसएस - calc और VH का उपयोग करेंगे।

बीच div के अहो thusly की गणना की जाएगी:

#middle-div { 
height: calc(100vh - 46px); 
}

है, व्यूपोर्ट ऊंचाई की 100% घटा 2 * 23px। यह सुनिश्चित करेगा कि पृष्ठ ठीक से लोड हो और गतिशील (demo here) है।

बॉक्स-साइजिंग का भी उपयोग करना याद रखें, इसलिए पैडिंग और सीमाएं व्यूपोर्ट को divs से बाहर नहीं बनाती हैं।

स्रोत

2016-11-21 20:39:25

वस्तुतः सभी मौजूदा ब्राउज़र कैल्क का समर्थन करते हैं (यहां: http://caniuse.com/#feat=calc) और vh के लिए समान (यहां: http://caniuse.com/#feat=viewport-units) –

JQuery: गतिशील ऊंचाई() विंडो आकार परिवर्तन()

उत्तर

संबंधित मुद्दे