दिलचस्प पोस्ट
एरे को ऑब्जेक्ट में कनवर्ट करें मैं सी या सी ++ का उपयोग कर निर्देशिका में फाइलों की सूची कैसे प्राप्त करूं? जावास्क्रिप्ट में गतिशील मापदंडों के साथ गतिशील फ़ंक्शन कॉल करना क्यों नल एक वस्तु है और रिक्त और अपरिभाषित के बीच अंतर क्या है? Web.xml में url- पैटर्न क्या है और सबलेट को कॉन्फ़िगर कैसे करें पर्ल में एक स्ट्रिंग में फ़ाइल को गलाने का सबसे अच्छा तरीका क्या है? JQuery के तत्व के लिए कक्षा सूची प्राप्त करें कैसे डैमिज़ के लिए – पैकेट के लिए matplotlib एम्बेड करें विन्यास फाइल में एन्क्रिप्ट पासवर्ड? वैश्विक माउस ईवेंट हैंडलर SQL सर्वर में प्रमुख शून्य के साथ पैडिंग द्वारा फ़ॉर्मेटिंग नंबर jquery – क्लिक करें घटना गतिशील बनाया बटन के लिए काम नहीं कर रहा है दो या अधिक iPhone अनुप्रयोगों के बीच डेटा साझा करें सिग्नल हेन्डलर में printf का उपयोग कैसे करें? फोरट्रान: पूर्णांक * 4 बनाम पूर्णांक (4) बनाम पूर्णांक (प्रकार = 4)

100% न्यूनतम ऊंचाई सीएसएस लेआउट

ब्राउज़रों की एक विस्तृत श्रृंखला में 100% न्यूनतम ऊंचाई का एक तत्व बनाने का सबसे अच्छा तरीका क्या है? विशेष रूप से यदि आपके पास एक निश्चित ऊंचाई वाला शीर्षलेख और पादलेख है, तो आप मध्य कंटेंट का हिस्सा कैसे बना सकते हैं, उसमें से 100% तक के स्थान को नीचे तक तय किया गया है?

वेब के समाधान से एकत्रित समाधान "100% न्यूनतम ऊंचाई सीएसएस लेआउट"

मैं निम्नलिखित का उपयोग कर रहा हूं: सीएसएस लेआउट – 100% ऊंचाई

मिन-ऊंचाई

इस पेज के # कंटेनर तत्व में न्यूनतम-100% की ऊंचाई है। इस तरह, यदि सामग्री को व्यूपोर्ट की तुलना में अधिक ऊंचाई की आवश्यकता होती है, तो # कंटेंट बलों # कंटेनर की ऊंचाई अब भी उतनी ही अधिक हो सकती है #content में संभव स्तंभों को तब # कंटेनर पर पृष्ठभूमि छवि के साथ देखा जा सकता है; divs तालिका कोशिकाओं नहीं हैं, और आपको ऐसी दृश्य प्रभाव बनाने के लिए भौतिक तत्वों (या इच्छित) की आवश्यकता नहीं है। यदि आप अभी तक आश्वस्त नहीं हैं; सीधे लाइनों और सरल रंग योजनाओं के बजाय वोकली लाइन और ग्रेडिएंट लगता है

सापेक्ष स्थिति

क्योंकि # कंटेनर की कोई रिश्तेदार स्थिति है, # फुटर हमेशा अपने नीचे रहती है; चूंकि ऊपर उल्लिखित न्यूनतम ऊँचाई # कंटेनर को स्केलिंग से रोकती नहीं है, यह तब भी काम करेगा जब (या विशेष रूप से तब) #content forces #container लंबे समय तक बनने के लिए

नीचे गद्दी करना

चूंकि यह अब सामान्य प्रवाह में नहीं है, #content के पेडिंग-नीचे अब पूर्ण #footer के लिए स्थान प्रदान करता है यह पैडिंग स्क्रॉल ऊंचाई में डिफ़ॉल्ट रूप से शामिल है, ताकि पाद लेख ऊपर की सामग्री को कभी भी ओवरलैप न करे।

इस लेआउट का परीक्षण करने के लिए टेक्स्ट का आकार थोड़ा सा स्केल करें या अपनी ब्राउज़र विंडो का आकार बदलें।

 html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ background:gray; font-family:arial,sans-serif; font-size:small; color:#666; } h1 { font:1.5em georgia,serif; margin:0.5em 0; } h2 { font:1.25em georgia,serif; margin:0 0 0.5em; } h1, h2, a { color:orange; } p { line-height:1.5; margin:0 0 1em; } div#container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:750px; background:#f0f0f0; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } div#header { padding:1em; background:#ddd url("../csslayout.gif") 98% 10px no-repeat; border-bottom:6px double gray; } div#header p { font-style:italic; font-size:1.1em; margin:0; } div#content { padding:1em 1em 5em; /* bottom padding for footer */ } div#content p { text-align:justify; padding:0 1em; } div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */ background:#ddd; border-top:6px double gray; } div#footer p { padding:1em; margin:0; } 

मेरे लिए ठीक काम करता है

कहीं भी लॉक कस्टम ऊंचाई सेट करने के लिए:

 body, html { height: 100%; } #outerbox { width: 100%; position: absolute; /* to place it somewhere on the screen */ top: 130px; /* free space at top */ bottom: 0; /* makes it lock to the bottom */ } #innerbox { width: 100%; position: absolute; min-height: 100% !important; /* browser fill */ height: auto; /*content fill */ } 
 <div id="outerbox"> <div id="innerbox"></div> </div> 

विवरण के लिए, vh , या viewpoint height पर आधारित एक अन्य समाधान है, सीएसएस इकाइयों पर जाएं। यह इस समाधान पर आधारित है, जो बजाय फ्लेक्स का उपयोग करता है।

 * { /* personal preference */ margin: 0; padding: 0; } html { /* make sure we use up the whole viewport */ width: 100%; min-height: 100vh; /* for debugging, a red background lets us see any seams */ background-color: red; } body { /* make sure we use the full width but allow for more height */ width: 100%; min-height: 100vh; /* this helps with the sticky footer */ } main { /* for debugging, a blue background lets us see the content */ background-color: skyblue; min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */ } footer { /* for debugging, a gray background lets us see the footer */ background-color: gray; min-height:2.5em; } 
 <main> <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> <p>This is the content.</p> </main> <footer> <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p> <p>This is the footer.</p> </footer> 

kleolb02 का उत्तर बहुत अच्छा लगता है एक और तरीका चिपचिपा पाद लेख और न्यूनतम ऊंचाई हैक का एक संयोजन होगा

एक शुद्ध CSS समाधान ( #content { min-height: 100%; } ) कई मामलों में काम करेगा, लेकिन उन सभी में नहीं – विशेष रूप से आईई 6 और आईई 7।

दुर्भाग्यवश, वांछित व्यवहार पाने के लिए आपको जावास्क्रिप्ट समाधान का सहारा लेना होगा। यह आपकी सामग्री के लिए वांछित ऊंचाई की गणना करके किया जा सकता है <div> और इसे एक समारोह में सीएसएस संपत्ति के रूप में सेट किया जा रहा है:

 function resizeContent() { var contentDiv = document.getElementById('content'); var headerDiv = document.getElementById('header'); // This may need to be done differently on IE than FF, but you get the idea. var viewPortHeight = window.innerHeight - headerDiv.clientHeight; contentDiv.style.height = Math.max(viewportHeight, contentDiv.clientHeight) + 'px'; } 

फिर आप इस फ़ंक्शन को onResize और onResize ईवेंट के लिए एक हैंडलर के रूप में सेट कर सकते हैं:

 <body onload="resizeContent()" onresize="resizeContent()"> . . . </body> 

min-height लिए प्रतिशत के साथ सही तरीके से काम करने के लिए, जबकि उसकी माता min-height पिता नोड min-height को विरासत में लेना है, तो यह चाल माता-पिता नोड की ऊंचाई को 1px सेट करने के लिए होगी और फिर बच्चे की min-height ठीक से काम करेगी।

डेमो पेज

मैं Levik से सहमत हूं कि यदि माता-पिता कंटेनर 100% पर सेट किया गया है, तो आपके पास साइडबार हैं और चाहते हैं कि वे पाद लेख को पूरा करने के लिए जगह भरें, आप 100% तक सेट नहीं कर सकते, क्योंकि वे माता-पिता की ऊंचाई के 100 प्रतिशत होंगे इसका अर्थ है कि स्पष्ट कार्य का उपयोग करते समय पादरी को धक्का दिया जाता है।

इसके बारे में सोचें कि अगर आपका हेडर 50 पिक्स ऊंचाई और आपके पाद लेख की ऊंचाई 50px है और सामग्री को शेष स्थान पर सिर्फ ऑटोफिट किया जाता है तो उदाहरण के लिए 100px कहते हैं और पृष्ठ कंटेनर इस मान का 100% है इसकी ऊंचाई 200px होगी फिर जब आप साइडबार की ऊंचाई 100% तक सेट करते हैं तो 200px तब होता है, हालांकि यह शीर्ष लेख और पाद लेख के बीच में फिट होना चाहिए। इसके बजाय यह 50px + 200px + 50px हो जाता है, इसलिए पृष्ठ अब 300px है क्योंकि साइडबार पृष्ठ कंटेनर के समान ऊंचाई पर सेट हैं पृष्ठ की सामग्री में एक बड़ा सफेद स्थान होगा

मैं इंटरनेट एक्सप्लोरर 9 का उपयोग कर रहा हूं और यह इस 100% विधि का उपयोग करते समय मुझे प्रभाव के रूप में मिल रहा है। मैंने अन्य ब्राउज़रों में इसे करने की कोशिश की और मुझे लगता है कि यह कुछ अन्य विकल्पों में काम कर सकता है लेकिन यह सार्वभौमिक नहीं होगा

पहले आप अपनी content div के बाद id='footer' साथ एक div बनाना चाहिए और फिर बस ऐसा करें।

आपका HTML इस तरह दिखना चाहिए:

 <html> <body> <div id="content"> ... </div> <div id="footer"></div> </body> </html> 

और सीएसएस:

 ​html, body { height: 100%; } #content { height: 100%; } #footer { clear: both; } 

शायद सबसे कम समाधान (केवल आधुनिक ब्राउज़रों में काम करता है)

सीएसएस का यह छोटा टुकड़ा "the middle content part fill 100% of the space in between with the footer fixed to the bottom" :

 html, body { height: 100%; } your_container { min-height: calc(100% - height_of_your_footer); } 

केवल आवश्यकता यह है कि आपको एक निश्चित ऊँचाई पाद लेख की आवश्यकता है

उदाहरण के लिए इस लेआउट के लिए:

 <html><head></head><body> <main> your main content </main> </footer> your footer content </footer> </body></html> 

आपको इस सीएसएस की आवश्यकता है:

 html, body { height: 100%; } main { min-height: calc(100% - 2em); } footer { height: 2em; } 

इसे इस्तेमाल करे:

 body{ height: 100%; } #content { min-height: 500px; height: 100%; } #footer { height: 100px; clear: both !important; } 

सामग्री डिवेल के नीचे दिए गए तत्व को clear:both होना चाहिए clear:both

आप यह कोशिश कर सकते हैं: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ यह 100% ऊंचाई और क्षैतिज केंद्र है

बस मैं क्या इस्तेमाल किया गया है साझा, और अच्छी तरह से काम करता है

 #content{ height: auto; min-height:350px; } 

जैसा अफशिन मेहराबानी के उत्तर में बताया गया है, आपको शरीर और एचटीएमएल की ऊंचाई 100% तक सेट करनी चाहिए, लेकिन वहां पाद लेख प्राप्त करने के लिए आवरण की ऊंचाई की गणना करें:

 #pagewrapper{ /* Firefox */ height: -moz-calc(100% - 100px); /*assume ie your header above the wrapper is 80 and the footer bellow is 20*/ /* WebKit */ height: -webkit-calc(100% - 100px); /* Opera */ height: -o-calc(100% - 100px); /* Standard */ height: calc(100% - 100px); }