दिलचस्प पोस्ट
क्यों नहीं सी # एक इंटरफेस को लागू करने के लिए स्टेटिक तरीके की अनुमति दें? php फाइल को किसी अन्य सर्वर से PHP सहित दो छवियों की तुलना करें अजगर / लिनक्स तरीका सी ++ में रैंड () फ़ंक्शन का उपयोग करने का सही तरीका क्या है? उलझन भरा गणनीय.कास्ट अवैध कस्ट अपवाद iPhone ऐप मिनस ऐप स्टोर? अगर सबसे ज्यादा किया जाता है तो एफ़-एलिफ-एलीफ-एफ़ ऐ कथन बनाने का सबसे कारगर तरीका है? जब JAXB मार्शल एक्सएसडी: डेटटाइम का इस्तेमाल किया गया है, तो दिनांक प्रारूप का उपयोग कैसे करें? चेक के रूप में रेडियो बटन के लिए प्रारंभिक मान असाइन करें एक HTML तालिका में वर्ड-रैप जीएसओएन जावा आरक्षित कीवर्ड मैट्रिक्स गुणा में bsxfun कार्यान्वयन एक्शन बार पर शीर्षक के पाठ का आकार कैसे बदल सकता है? कैसे जांचने के लिए कि ऑपरेटर == मौजूद है? लूप के अंदर एक वेक्टर के तत्व निकालें

एक डिवीजन को शेष स्क्रीन स्थान की ऊंचाई भरें

मैं वर्तमान में एक वेब एप्लिकेशन पर काम कर रहा हूं, जहां मैं पूरी स्क्रीन की ऊंचाई को भरने के लिए सामग्री चाहता हूं।

पृष्ठ में एक हैडर है, जिसमें एक लोगो और खाता जानकारी शामिल है। यह एक मनमाना ऊंचाई हो सकती है मैं चाहता हूं कि सामग्री डिवेल को बाकी पृष्ठ को नीचे तक भरना है।

मेरे पास एक हैडर div और एक सामग्री div फिलहाल मैं इस तरह से लेआउट के लिए एक टेबल का उपयोग कर रहा हूं:

सीएसएस और एचटीएमएल

 #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } 
 <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> 

पृष्ठ की पूरी ऊंचाई भरी है, और कोई स्क्रॉल करने की आवश्यकता नहीं है।

सामग्री डिवा के अंदर कुछ भी, top: 0; सेट करने के लिए top: 0; इसे शीर्ष लेख के नीचे सही रखा जाएगा कभी-कभी सामग्री एक असली तालिका होगी, इसकी ऊंचाई 100% तक तय हो जाएगी। content अंदर header डालने से यह काम करने की अनुमति नहीं होगी।

table का उपयोग किए बिना एक ही प्रभाव प्राप्त करने का कोई तरीका क्या है?

अद्यतन करें:

सामग्री div अंदर के तत्वों को भी ऊंचाइयों को प्रतिशत के रूप में सेट किया जाएगा। तो div अंदर 100% पर कुछ नीचे भर जाएगा। जैसा कि 50% पर दो तत्व होंगे

अपडेट 2:

उदाहरण के लिए, यदि शीर्ष स्क्रीन की ऊंचाई 20% तक ले जाती है, तो #content भीतर 50% पर निर्दिष्ट एक टेबल स्क्रीन स्थान का 40% तक ले जाएगा। अब तक, तालिका में पूरी चीज को लपेटकर एक ही चीज़ काम करती है।

वेब के समाधान से एकत्रित समाधान "एक डिवीजन को शेष स्क्रीन स्थान की ऊंचाई भरें"

2015 अपडेट: फ्लेक्सबॉक्स दृष्टिकोण

संक्षेप में फ्लेक्सबॉक्स का दो अन्य उत्तर दिए गए हैं ; हालांकि, यह दो साल पहले से अधिक था, और वे किसी भी उदाहरण प्रदान नहीं करते हैं फ्लेक्सबॉक्स के लिए विनिर्देश निश्चित रूप से अब तय हो गया है।

नोट: हालांकि सीएसएस फ्लेक्सिबल बॉक्स्स लेआउट विनिर्देश उम्मीदवार सिफारिश स्तर पर है, सभी ब्राउज़रों ने इसे लागू नहीं किया है। वेबकिट कार्यान्वयन के साथ उपसर्ग होना चाहिए -webkit-; इंटरनेट एक्सप्लोरर स्पेस का एक पुराना संस्करण लागू करता है, जिसमें उपसर्ग के साथ- ms-; ओपेरा 12.10, कल्पना का नवीनतम संस्करण लागू करता है, अप्रूिक्स्ड। अप-टू-डेट संगतता स्थिति के लिए प्रत्येक संपत्ति पर संगतता तालिका देखें।

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes से लिया गया)

सभी प्रमुख ब्राउज़रों और IE11 + फ्लेक्सबॉक्स का समर्थन IE 10 या अधिक के लिए, आप फ्लेक्सीजेएस शिम का उपयोग कर सकते हैं।

मौजूदा समर्थन की जांच के लिए आप यहां भी देख सकते हैं: http://caniuse.com/#feat=flexbox

कार्यरत उदाहरण

फ्लेक्सबॉक्स के साथ आप आसानी से अपनी किसी भी पंक्ति या कॉलम के बीच स्विच कर सकते हैं या तो निश्चित आयाम, कंटेंट साइज आयाम या शेष-स्पेस आयाम। मेरे उदाहरण में मैंने अपनी सामग्री को स्नैप करने के लिए सेट किया है (ओपी प्रश्न के मुताबिक), मैंने एक फिक्स्चर को दिखाया है कि कैसे एक निश्चित ऊंचाई क्षेत्र जोड़ने के लिए और फिर शेष क्षेत्र को भरने के लिए सामग्री क्षेत्र सेट करें।

 html, body { height: 100%; margin: 0 } .box { display: flex; flex-flow: column; height: 100%; } .box .row { border: 1px dotted grey; } .box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } .box .row.content { flex: 1 1 auto; } .box .row.footer { flex: 0 1 40px; } 
 <!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` --> <div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div> </div> 

वास्तव में सीएसएस में ऐसा करने के लिए एक ध्वनि, क्रॉस-ब्राउज़र तरीका नहीं है। अपने लेआउट में जटिलताओं को मानते हुए, आपको तत्व की ऊंचाई सेट करने के लिए जावास्क्रिप्ट का उपयोग करना होगा। आपको क्या करने की आवश्यकता का सार यह है:

 Element Height = Viewport height - element.offset.top - desired bottom margin 

एक बार जब आप यह मान प्राप्त कर सकते हैं और तत्व की ऊँचाई सेट कर सकते हैं, तो आपको खिड़की के ऑनलोड और ऑनरेज़ दोनों में ईवेंट हैंडलर्स को संलग्न करना होगा ताकि आप अपने आकार परिवर्तन समारोह को आग लगा सकें।

इसके अलावा, अपनी सामग्री को संभालने से व्यूपोर्ट की तुलना में बड़ा हो सकता है, आपको स्क्रॉल करने के लिए अतिप्रवाह-वाई सेट करना होगा

मूल पोस्ट 3 साल से अधिक पहले है और मुझे लगता है कि मेरे जैसे इस पोस्ट में आने वाले कई लोग ऐप के समान लेआउट समाधान की तलाश में हैं, कहते हैं कि किसी भी तरह से तय हैडर, पाद लेख, और बाकी की स्क्रीन पूरी तरह उठाने वाली सामग्री। यदि हां, तो यह पोस्ट मदद कर सकता है, यह आईई 7 + आदि पर काम करता है।

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

और यहां उस पोस्ट के कुछ स्निपेट हैं,

 @media screen { /* start of screen rules. */ /* Generic pane rules */ body { margin: 0 } .row, .col { overflow: hidden; position: absolute; } .row { left: 0; right: 0; } .col { top: 0; bottom: 0; } .scroll-x { overflow-x: auto; } .scroll-y { overflow-y: auto; } .header.row { height: 75px; top: 0; } .body.row { top: 75px; bottom: 50px; } .footer.row { height: 50px; bottom: 0; } /* end of screen rules. */ } 
 <div class="header row"> <h2>My header</h2> </div> <div class="body row scroll-y"> <p>The body</p> </div> <div class="footer row"> My footer </div> 

मार्कअप में तालिकाओं का उपयोग करने के बजाय, आप सीएसएस तालिकाओं का उपयोग कर सकते हैं

मार्कअप

 <body> <div>hello </div> <div>there</div> </body> 

(प्रासंगिक) सीएसएस

 body { display:table; width:100%; } div { display:table-row; } div+ div { height:100%; } 

FIDDLE1 और FIDDLE2

इस विधि के कुछ फायदे हैं:

1) कम मार्कअप

2) मार्कअप तालिकाओं की तुलना में अधिक शब्दार्थ है, क्योंकि यह सारणीय डेटा नहीं है।

3) ब्राउज़र समर्थन बहुत अच्छा है : IE8 +, सभी आधुनिक ब्राउज़र्स और मोबाइल डिवाइस ( caniuse )


बस पूर्णता के लिए, यहां सीएसएस तालिका मॉडल के लिए सीएसएस गुणों के बराबर एचटीएमएल तत्व हैं

 table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } 

सीएसएस केवल दृष्टिकोण (यदि ऊंचाई ज्ञात है / फिक्स्ड है)

जब आप चाहते हैं कि मध्य तत्व पूरे पृष्ठ में लंबवत हो, तो आप calc() उपयोग कर सकते हैं जो CSS3 में पेश किया गया है।

मान लें कि हमारे पास एक निश्चित ऊंचाई header और footer तत्व हैं और हम चाहते हैं कि section टैग पूरी ऊर्ध्वाधर ऊँचाई ले सके …

डेमो

मान लिया गया मार्कअप

 <header>100px</header> <section>Expand me for remaining space</section> <footer>150px</footer> 

तो आपका सीएसएस होना चाहिए

 html, body { height: 100%; } header { height: 100px; background: grey; } section { height: calc(100% - (100px + 150px)); /* Adding 100px of header and 150px of footer */ background: tomato; } footer { height: 150px; background-color: blue; } 

तो यहाँ, क्या कर रहा है, तत्वों की ऊँचाई को बढ़ाकर और calc() फ़ंक्शन का उपयोग करके 100% से घटाकर।

बस सुनिश्चित करें कि आप height: 100%; उपयोग करें height: 100%; अभिभावक तत्वों के लिए

प्रयुक्त: height: calc(100vh - 110px);

कोड:

 .header { height: 60px; top: 0; background-color: green} .body { height: calc(100vh - 110px); /*50+60*/ background-color: gray; } .footer { height: 50px; bottom: 0; } 
 <div class="header"> <h2>My header</h2> </div> <div class="body"> <p>The body</p> </div> <div class="footer"> My footer </div> 

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

यदि आप यहां तक ​​कि भाग्यशाली हैं और आपके उपयोगकर्ता शीर्ष स्तरीय ब्राउज़रों का उपयोग कर रहे हैं (उदाहरण के लिए, यदि यह कंप्यूटर पर आपके द्वारा नियंत्रित किए गए कंप्यूटर पर एक इंट्रानेट ऐप है, जैसे मेरी नवीनतम प्रोजेक्ट है), तो आप CSS3 में नए लचीले बॉक्स लेआउट का उपयोग कर सकते हैं!

मेरे लिए क्या काम किया (एक div के साथ दूसरे डिवा में और मैं अन्य सभी परिस्थितियों में मानता हूँ) नीचे पैडिंग को 100% तक सेट करना है यही है, इसे अपने सीएसएस / स्टाइलशीट में जोड़ें:

 padding-bottom: 100%; 

किसी भी समाधान पर कार्य पोस्ट नहीं किया गया जब सामग्री को बहुत लंबा होने पर आपको स्क्रॉल करने की निचले हिस्से की आवश्यकता होती है। यहां एक समाधान है जो उस मामले में काम करता है:

HTML:

 <div class="table container"> <div class="table-row header"> <div>This is the header whose height is unknown</div> <div>This is the header whose height is unknown</div> <div>This is the header whose height is unknown</div> </div> <div class="table-row body"> <div class="table-cell body-content-outer-wrapper"> <div class="body-content-inner-wrapper"> <div class="body-content"> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> <div>This is the scrollable content whose height is unknown</div> </div> </div> </div> </div> </div> 

सीएसएस:

 .table { display: table; } .table-row { display: table-row; } .table-cell { display: table-cell; } .container { width: 400px; height: 300px; } .header { background: cyan; } .body { background: yellow; height: 100%; } .body-content-outer-wrapper { height: 100%; } .body-content-inner-wrapper { height: 100%; position: relative; overflow: auto; } .body-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

मूल स्रोत: सीएसएस में ओवरफ्लो को संभालने में एक कंटेनर की ऊपरी ऊंचाई भरना

JSFiddle लाइव पूर्वावलोकन

यह विशुद्ध रूप से CSS द्वारा किया जा सकता है जो कि vh :

 #page { display:block; width:100%; height:95vh !important; overflow:hidden; } #tdcontent { float:left; width:100%; display:block; } #content { float:left; width:100%; height:100%; display:block; overflow:scroll; } 

और HTML

 <div id="page"> <div id="tdcontent"> </div> <div id="content"> </div> </div> 

मैंने इसे चेक किया, यह सभी प्रमुख ब्राउज़रों में काम करता है: Chrome , IE , और FireFox

फ्लेक्सबॉक्स का उपयोग करके एक सरल समाधान:

 <div>header</div> <div class="content"></div> 

 html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex-grow: 1; } 

कोडन नमूना

एक वैकल्पिक समाधान, सामग्री div में केंद्रित एक div के साथ

CSS3 के मार्ग

 height: calc(100% - 10px); // 10px is height of your first div... 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> body ,html { height: 100%; margin: 0; padding: 0; color: #FFF; } #header { float: left; width: 100%; background: red; } #content { height: 100%; overflow: auto; background: blue; } </style> </head> <body> <div id="content"> <div id="header"> Header <p>Header stuff</p> </div> Content <p>Content stuff</p> </div> </body> </html> 

सभी समझदार ब्राउज़र में, आप सामग्री के सामने "हैडर" div डाल सकते हैं, एक भाई के रूप में, और उसी सीएसएस काम करेगा। हालांकि, आईई 7- ऊँचाई सही ढंग से व्याख्या नहीं करता है, यदि उस मामले में फ्लोट 100% है, तो शीर्ष लेख को ऊपर की तरह सामग्री में होना चाहिए। अतिप्रवाह: ऑटो IE पर डबल स्क्रॉल सलाखों का कारण होगा (जो हमेशा व्यूपोर्ट स्क्रॉलबार दृश्यमान होता है, लेकिन अक्षम रहता है), लेकिन इसके बिना, यदि यह अतिप्रवाह करता है तो सामग्री क्लिप जाएगा।

यदि आप पुराने ब्राउज़रों (अर्थात, 9 9 या अधिक MSIE) का समर्थन नहीं करने से निपट सकते हैं, तो आप ऐसा लचीले बॉक्स लेआउट मॉड्यूल के साथ कर सकते हैं जो पहले से ही W3C CR है वह मॉड्यूल अन्य अच्छी चालें भी देता है, जैसे कि पुनः क्रम वाली सामग्री।

दुर्भाग्य से, MSIE 9 या उससे कम इस का समर्थन नहीं करते हैं और आपको फ़ायरफ़ॉक्स के अलावा हर ब्राउज़र के लिए सीएसएस प्रॉपर्टी के लिए विक्रेता उपसर्ग का उपयोग करना होगा। उम्मीद है कि दूसरे विक्रेताओं को उपसर्ग को जल्द ही छोड़ देना चाहिए।

एक अन्य विकल्प सीएसएस ग्रिड लेआउट होगा, लेकिन इसमें ब्राउज़रों के स्थिर संस्करणों से भी कम समर्थन है। व्यवहार में, केवल MSIE 10 इस का समर्थन करता है।

मैंने थोड़ी देर के लिए इस के साथ पछाड़ लिया और निम्नलिखित के साथ समाप्त हुआ:

चूंकि यह सामग्री डीआईवी को माता-पिता के रूप में समान ऊंचाई बनाना आसान है, लेकिन जाहिरा तौर पर माता-पिता की ऊँचाई को कम करना हेडर की ऊँचाई मुझे सामग्री की पूर्ण ऊंचाई बनाने का फैसला किया गया था, लेकिन यह शीर्ष बाएं कोने में पूरी तरह से स्थान रखता है और फिर एक पैडिंग को परिभाषित करता है शीर्ष के लिए जो शीर्षलेख की ऊंचाई है इस तरह से सामग्री शीर्ष के नीचे बड़े करीने से प्रदर्शित होती है और पूरे शेष स्थान को भरती है:

 body { padding: 0; margin: 0; height: 100%; overflow: hidden; } #header { position: absolute; top: 0; left: 0; height: 50px; } #content { position: absolute; top: 0; left: 0; padding-top: 50px; height: 100%; } 

ऐसा क्यों न हो?

 html, body { height: 100%; } #containerInput { background-image: url('../img/edit_bg.jpg'); height: 40%; } #containerControl { background-image: url('../img/control_bg.jpg'); height: 60%; } 

आपको HTML और शरीर (उस क्रम में) एक ऊंचाई दे और फिर अपने तत्वों को एक ऊंचाई दें?

मेरे लिये कार्य करता है

अस्वीकरण: स्वीकृत जवाब समाधान के विचार को देता है, लेकिन मुझे अनावश्यक आवरण और सीएसएस नियमों के साथ थोड़ा सा फूला हुआ लग रहा है। नीचे बहुत कुछ सीएसएस नियमों के साथ एक समाधान है।

एचटीएमएल 5

 <body> <header>Header with an arbitrary height</header> <main> This container will grow so as to take the remaining height </main> </body> 

सीएसएस

 body { display: flex; flex-direction: column; min-height: 100vh; /* body takes whole viewport's height */ } main { flex: 1; /* this will make the container take the free space */ } 

उपरोक्त समाधान व्यूपोर्ट इकाइयों और फ्लेक्सबॉक्स का उपयोग करता है, और इसलिए आईई 10 + है, जिससे आपको आईई 10 के लिए पुराने सिंटैक्स का इस्तेमाल किया जा सकता है।

के साथ खेलने के लिए codepen : codepen करने के लिए लिंक

या यह एक है, जिनके लिए मुख्य कंटेनर की आवश्यकता होती है, उन्हें सामग्री के अतिप्रवाह के मामले में स्क्रॉल करने की आवश्यकता होती है: कोडपेन के लिए लिंक

आप वास्तव में display: table उपयोग कर सकते display: table क्षेत्र को दो तत्वों (हेडर और सामग्री) में विभाजित करने के लिए display: table , जहां हेडर ऊँचाई में भिन्न हो सकते हैं और सामग्री शेष स्थान को भरती है। यह पूरे पृष्ठ के साथ काम करता है, साथ ही साथ जब क्षेत्र केवल किसी अन्य तत्व की सामग्री को relative , absolute या fixed position सेट किया fixed । यह तब तक काम करेगा जब तक कि मूल तत्व में शून्य-शून्य ऊंचाई हो।

इस बेला और नीचे दिए गए कोड को भी देखें:

सीएसएस:

 body, html { height: 100%; margin: 0; padding: 0; } p { margin: 0; padding: 0; } .additional-padding { height: 50px; background-color: #DE9; } .as-table { display: table; height: 100%; width: 100%; } .as-table-row { display: table-row; height: 100%; } #content { width: 100%; height: 100%; background-color: #33DD44; } 

HTML:

 <div class="as-table"> <div id="header"> <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p> <div class="additional-padding"></div> </div> <div class="as-table-row"> <div id="content"> <p>This is the actual content that takes the rest of the available space.</p> </div> </div> </div> 

अब जवाब का एक टन है, लेकिन मैं ऊंचाई का उपयोग कर पाया: 100 वीएच; डिवेल तत्व पर काम करने के लिए जो कि उपलब्ध पूरे ऊर्ध्वाधर स्थान को भरने की जरूरत होती है।

इस तरह, मुझे डिस्प्ले या पोजीशनिंग के साथ खेलने की जरूरत नहीं है डैशबोर्ड बनाने के लिए बूटस्ट्रैप का उपयोग करते समय यह एक काम में आया, जिसमें मेरे पास एक साइडबार और एक मुख्य था मैं मुख्य चाहता था कि पूरे ऊर्ध्वाधर स्थान को फैलाने और भरें ताकि मैं एक पृष्ठभूमि रंग लागू कर सकूं।

 div { height: 100vh; } 

IE9 और ऊपर का समर्थन करता है: लिंक देखने के लिए क्लिक करें

कैसे आप केवल vh उपयोग करते हैं जो कि view height

नीचे दिए गए कोड स्निपेट को देखो और इसे चलाएं:

 body { padding: 0; margin: 0; } .full-height { width: 100px; height: 100vh; background: red; } 
 <div class="full-height"> </div> 

विन्सेंट, मैं अपनी नई आवश्यकताओं का उपयोग करके फिर से उत्तर दूंगा। चूंकि आप को छिपी हुई सामग्री के बारे में परवाह नहीं है, अगर यह बहुत लंबा है, तो आपको शीर्षलेख को फ्लोट करने की आवश्यकता नहीं है। बस एचटीएमएल और बॉडी टैग पर ओवरफ्लो #content , और # #content ऊंचाई 100% तक सेट करें। सामग्री हमेशा हेडर की ऊंचाई से व्यूपोर्ट की तुलना में अधिक होगी, लेकिन यह छिपी होगी और स्क्रॉलबार नहीं पैदा करेगा।

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> body, html { height: 100%; margin: 0; padding: 0; overflow: hidden; color: #FFF; } p { margin: 0; } #header { background: red; } #content { position: relative; height: 100%; background: blue; } #content #positioned { position: absolute; top: 0; right: 0; } </style> </head> <body> <div id="header"> Header <p>Header stuff</p> </div> <div id="content"> Content <p>Content stuff</p> <div id="positioned">Positioned Content</div> </div> </body> </html> 

मुझे एक बहुत ही सरल समाधान मिला, क्योंकि मेरे लिए यह सिर्फ एक डिजाइन मुद्दा था। मैं चाहता हूं कि बाकी पन्ने लाल पाद लेख से नीचे सफेद न हों। इसलिए मैं पेजों की पृष्ठभूमि को लाल रंग में सेट करता हूं और सामग्री पृष्ठभूमि का रंग सफेद करने के लिए सामग्री ऊँचाई के साथ उदाहरण के लिए सेट 20em या 50% लगभग रिक्त पृष्ठ पूरे पृष्ठ लाल नहीं छोड़ेगा

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

 var sizeFooter = function(){ $(".webfooter") .css("padding-bottom", "0px") .css("padding-bottom", $(window).height() - $("body").height()) } $(window).resize(sizeFooter); 

यह गतिशील कैमरा स्क्रीन का बेहतर इस्तेमाल करता है, बेहतर ढंग से जावास्क्रिप्ट का उपयोग कर रहा है।

आप सीएसएस-इन-जेएस टेक्नोलॉजी का उपयोग कर सकते हैं, जैसे कि लिब:

https://github.com/cssobj/cssobj

डेमो: https://cssobj.github.io/cssobj-demo/

मोबाइल ऐप के लिए मैं केवल वीएच और वीडब्ल्यू का उपयोग करता हूँ

 <div class="container"> <div class="title">Title</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> .container { width: 100vw; height: 100vh; font-size: 5vh; } .title { height: 20vh; background-color: red; } .content { height: 60vh; background: blue; } .footer { height: 20vh; background: green; } 

डेमो – https://jsfiddle.net/u763ck92/

श्री एलियन के विचार को बंद करना ….

यह CSS3 के सक्षम ब्राउज़रों के लिए लोकप्रिय फ्लेक्स बॉक्स से एक दुबला समाधान लगता है।

सामग्री ब्लॉक में बस calc () के साथ न्यूनतम ऊंचाई (ऊंचाई की बजाय) का उपयोग करें

कैल्श () 100% से प्रारंभ होता है और हेडर और पाद लेखों की ऊंचाइयों को घटाता है (पैडिंग मानों को शामिल करने की आवश्यकता है)

"ऊँचाई" के बजाय "न्यूनतम-ऊंचाई" का उपयोग करना उपयोगी है, इसलिए यह जावास्क्रिप्ट प्रदान की गई सामग्री और एंज्युलर 2 जैसी जेएस ढांचे के साथ काम कर सकता है। अन्यथा जावास्क्रिप्ट प्रदान की जाने वाली सामग्री दृश्यमान होने के बाद, गणना पृष्ठ के निचले भाग में पाद लेख को पुश नहीं करेगी।

यहां दोनों के लिए 50px ऊंचाई और 20px पैडिंग का उपयोग करते हुए हेडर और पादलेख के साथ एक सरल उदाहरण है

एचटीएमएल:

 <body> <header></header> <div class="content"></div> <footer></footer> </body> 

सीएसएस:

 .content { min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px)); } 

बेशक गणित को सरल किया जा सकता है लेकिन आपको यह विचार मिलता है …

मुझे एक ही समस्या थी लेकिन मैं ऊपर flexboxes के साथ समाधान का समाधान नहीं कर सका। इसलिए मैंने अपना खुद का टेम्पलेट बनाया, जिसमें शामिल हैं:

  • एक निश्चित आकार तत्व के साथ एक शीर्ष लेख
  • एक पाद लेख
  • शेष ऊंचाई को नियंत्रित करने वाले स्क्रॉलबार के साथ एक साइड बार
  • सामग्री

मैं फ्लेक्सबॉक्सेस का इस्तेमाल किया लेकिन एक और सरल तरीके से, केवल गुणों का उपयोग करते हुए प्रदर्शित करें: फ्लेक्स और फ्लेक्स-दिशा: पंक्ति | स्तंभ :

मैं कोणीय का उपयोग करता हूं और मैं चाहता हूं कि मेरे घटक के आकार उनके मूल तत्व का 100% हो।

कुंजी अपने आकार को सीमित करने के लिए सभी माता-पिता के लिए आकार (प्रति प्रतिशत) निर्धारित करना है निम्नलिखित उदाहरण में मेरीप की ऊंचाई व्यूपोर्ट का 100% है।

मुख्य घटक व्यूपोर्ट का 90% है, क्योंकि हेडर और पाद लेख में 5% हैं।

मैंने अपना टेम्प्लेट यहां पोस्ट किया: https://jsfiddle.net/abreneliere/mrjh6y2e/3

  body{ margin: 0; color: white; height: 100%; } div#myapp { display: flex; flex-direction: column; background-color: red; /* <-- painful color for your eyes ! */ height: 100%; /* <-- if you remove this line, myapp has no limited height */ } div#main /* parent div for sidebar and content */ { display: flex; width: 100%; height: 90%; } div#header { background-color: #333; height: 5%; } div#footer { background-color: #222; height: 5%; } div#sidebar { background-color: #666; width: 20%; overflow-y: auto; } div#content { background-color: #888; width: 80%; overflow-y: auto; } div.fized_size_element { background-color: #AAA; display: block; width: 100px; height: 50px; margin: 5px; } 

एचटीएमएल:

 <body> <div id="myapp"> <div id="header"> HEADER <div class="fized_size_element"></div> </div> <div id="main"> <div id="sidebar"> SIDEBAR <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> <div class="fized_size_element"></div> </div> <div id="content"> CONTENT </div> </div> <div id="footer"> FOOTER </div> </div> </body> 

CSS Grid Solution

Just defining the body with display:grid and the grid-template-rows using auto and the fr value property.

 * { margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; } header { padding: 1em; background: pink; } main { padding: 1em; background: lightblue; } footer { padding: 2em; background: lightgreen; } main:hover { height: 2000px; /* demos expansion of center element */ } 
 <header>HEADER</header> <main>MAIN</main> <footer>FOOTER</footer> 

If the only issue is height, just using divs seems to work:

 <div id="header">header content</div> <div id="content" style="height:100%">content content</div> 

In a simple test, the width of header/content is different in your example and mine, but I'm not sure from your post if you're concerned about the width?

it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the very first answer. I am using that approach to rescale the <div> with the Google Maps.

Here is the full example how to do that (works in Safari/FireFox/IE/iPhone/Andorid (works with rotation)):

सीएसएस

 body { height: 100%; margin: 0; padding: 0; } .header { height: 100px; background-color: red; } .content { height: 100%; background-color: green; } 

जे एस

 function resize() { // Get elements and necessary element heights var contentDiv = document.getElementById("contentId"); var headerDiv = document.getElementById("headerId"); var headerHeight = headerDiv.offsetHeight; // Get view height var viewportHeight = document.getElementsByTagName('body')[0].clientHeight; // Compute the content height - we want to fill the whole remaining area // in browser window contentDiv.style.height = viewportHeight - headerHeight; } window.onload = resize; window.onresize = resize; 

एचटीएमएल

 <body> <div class="header" id="headerId">Hello</div> <div class="content" id="contentId"></div> </body>