शेष स्क्रीन स्थान की ऊँचाई को भरने के लिए एक div बनाएं

1907

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

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

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

CSS और HTML

#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;हेडर के ठीक नीचे होगी। कभी-कभी सामग्री एक वास्तविक तालिका होगी, जिसकी ऊंचाई 100% होगी। headerअंदर डालने से contentयह काम नहीं कर पाएगा।

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

अपडेट करें:

सामग्री के अंदर के तत्वों की divऊँचाई प्रतिशत के साथ-साथ प्रतिशत तक होगी। तो 100% के अंदर कुछ divइसे नीचे तक भर देगा। 50% पर दो तत्वों के रूप में।

अपडेट 2:

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

html  css  html-table 
— विन्सेंट मैकनाब
स्रोत
31
भविष्य में यहां किसी को भी ठोकर खाने के लिए, आप अधिकांश ब्राउज़र में वांछित टेबल लेआउट प्राप्त कर सकते हैं, टेबल मार्क-अप के बिना, display:tableगुणों और संबंधित गुणों का उपयोग करके , यह एक बहुत ही समान प्रश्न का उत्तर देख सकते हैं।
— अमेलियाबीआर
3
मैंने आपके सेटअप को पुन: व्यवस्थित करने की कोशिश की है - jsfiddle.net/ceELs - लेकिन इसका काम नहीं कर रहा है, मैं क्या याद कर रहा हूं?
— गिल बेट्स
5
@श्री। एलियन का उत्तर सरल और उपयोगी है, इसे देखें http://stackoverflow.com/a/23323175/188784
— गोहन
4
वास्तव में, आप जो वर्णन करते हैं, वह टेबल के साथ भी काम नहीं करता है: यदि सामग्री स्क्रीन की ऊँचाई से अधिक ऊर्ध्वाधर स्थान लेती है, तो टेबल सेल और पूरी तालिका स्क्रीन के नीचे से आगे बढ़ेगी। आपकी सामग्री का अतिप्रवाह: ऑटो स्क्रॉलबार दिखाई नहीं देगा।
— डेमियन
@GillBates यह काम करेगा जब आप मूल तत्व की ऊंचाई निर्दिष्ट करेंगे jsfiddle.net/ceELs/5
— Michal Vašut

जवाबों:

1108

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

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

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

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

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

वर्तमान समर्थन की जांच करने के लिए आप यहां भी देख सकते हैं: 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>
स्निपेट का विस्तार करें

ऊपर सीएसएस में, फ्लेक्स प्रॉपर्टी फ्लेक्स- आइटम के लचीलेपन को स्थापित करने के लिए फ्लेक्स-ग्रो , फ्लेक्स-हटना और फ्लेक्स-बेस गुणों को शॉर्टहैंड करता है । मोजिला का लचीले बॉक्स मॉडल से अच्छा परिचय है ।

— Pebbl
स्रोत
9
क्यों flex: 0 1 30px;विशेषता के box .rowरूप में यह हर div में ओवरराइड है?
— एर्डाल जी।
11
यहां फ्लेक्सबॉक्स के लिए ब्राउज़र का समर्थन है - जो कि हरे रंग को देखने के लिए अच्छा है - caniuse.com/#feat=flexbox
— ब्रायन बर्न्स
1
Flexie.js के लिए लिंक मर चुका है। यहाँ github प्रोजेक्ट github.com/doctyper/flexie
— ses3ion
52
निश्चित रूप से यह एक बहुत अच्छा दृष्टिकोण है और यह लगभग काम करता है;) div.content की सामग्री मूल फ्लेक्स-एड की ऊंचाई से अधिक होने पर एक छोटी सी समस्या है। वर्तमान कार्यान्वयन में "पाद" कम धक्का होगा और यह वह नहीं है जो डेवलपर्स उम्मीद करते हैं;) इसलिए मैंने एक बहुत आसान निर्धारण किया। jsfiddle.net/przemcio/xLhLuzf9/3 मैंने कंटेनर और अतिप्रवाह स्क्रॉल पर एडिटिओल फ्लेक्स को जोड़ा।
— प्रेज़ेमियो जू
12
@przemcio अच्छा बिंदु है, लेकिन मुझे नहीं लगता कि स्क्रॉल सामग्री होने क्या हर डेवलपर की उम्मीद है;) - आप केवल जोड़ने की जरूरत है चाहिए overflow-y: autoकरने के लिए .row.contentक्या आप फिर भी जरूरत प्राप्त करने के लिए।
— पेब्बल
226

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

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

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

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

— NICCAI
स्रोत
2
यही मुझे शक था। हालाँकि, ऐप जावास्क्रिप्ट को बंद करने के साथ भी काम करेगा, इसलिए मुझे लगता है कि मैं सिर्फ टेबल का उपयोग करता रहूंगा।
— विंसेंट मैकनाब
6
विन्सेंट, अपनी जमीन खड़े करने का तरीका। मैं ठीक यही काम करना चाह रहा था और यह सीएसएस से संभव नहीं है? मुझे यकीन नहीं है लेकिन परवाह किए बिना समाधान के अन्य टन में से कोई भी आपके द्वारा वर्णित है। जावास्क्रिप्ट एक ही है जो इस बिंदु पर सही ढंग से काम करता है।
— ट्रैविस
5
क्या होगा अगर खिड़की की ऊंचाई बदल जाती है
— Techsin
4
मेरा मतलब है ... हम 2013 में कैल्क का उपयोग क्यों नहीं कर रहे हैं?
— कामी
4
ऊंचाई: कैल्क (100vh - 400px); एक वैध सीएसएस शैली है जो वास्तव में इस पोस्ट के बारे में बताती है। अन्य सभी समाधान एक निश्चित मूल ऊंचाई या ब्लॉक डिस्प्ले होने पर निर्भर करते हैं।
— विलियमएक्स
167

मूल पद 3 वर्ष से अधिक पुराना है। मुझे लगता है कि मेरे जैसे इस पोस्ट पर आने वाले बहुत से लोग ऐप-जैसे लेआउट समाधान की तलाश कर रहे हैं, किसी तरह तय किए गए हेडर, फुटर और बाकी स्क्रीन को पूरा करने के लिए पूर्ण ऊंचाई सामग्री कहते हैं। यदि ऐसा है, तो यह पोस्ट IE7 + आदि पर काम कर सकती है।

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" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>
स्निपेट का विस्तार करें

— h - n
स्रोत
74
इसके साथ सिर्फ एक समस्या है: शीर्ष लेख और पाद लेख स्वतः-आकार नहीं हैं। यही कारण है कि वास्तविक कठिनाई है, और है कि क्यों एक "यह संभव नहीं है" जवाब शीर्ष पर वर्तमान में है ... है
— रोमन Starkov
मुझे एक 55px हेडर और एक डिव की आवश्यकता थी जो दस्तावेज़ के बाकी हिस्सों को भरता हो। यह समाधान है!
— मैटिस कैनेपा
आप बम हैं, मैं इतने लंबे समय से यह कोशिश कर रहा हूं और यह एकमात्र समाधान है जो मैंने पाया। मुझे शीर्ष पर 60px ऊंचाई और 100% स्पैन करने के लिए मेरे नौसेना तत्व की आवश्यकता थी, इसने इसे हल किया।
— एडम वेट
यह अच्छी तरह से काम करता है सिवाय इसके कि मुझे थोड़ी सी भी समस्या हो - अगर मैं display: tableशरीर में एक तत्व डालूं, तो यह शरीर को ओवरफ्लो करने लगता है। तो height: 100%सही ऊंचाई का उत्पादन नहीं करता है।
— जीएसटीआर
4
.colउपयोग नहीं किया जाता है, क्या यह है?
— स्लॉटरिडन
143

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

मार्कअप

<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 +, सभी आधुनिक ब्राउज़र और मोबाइल डिवाइस ( कैनीयूज़ )

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

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 }
— Danield
स्रोत
3
मैं सिर्फ सीएसएस टेबल की तकनीक की ओर इशारा किया गया था । पहले से दिए गए उत्तर को पहले से ही इस उत्तर वाले प्रश्न में बदल देता है। यह वह जगह है सबसे अच्छा समाधान; स्वच्छ, सुरुचिपूर्ण और सटीक उपकरण का सही तरीके से उपयोग करना। सीएसएस टेबल्स
— इयान बॉयड
फिडेल कोड यहाँ जवाब से काफी मेल नहीं खाता है। जोड़ना html, body { height: 100%, width: 100% }मेरे परीक्षणों में महत्वपूर्ण लग रहा था।
— mlibby
8
सीएसएस तालिकाओं की एक कष्टप्रद विशेषताएं सामान्य तालिकाओं के समान ही हैं: यदि सामग्री बहुत बड़ी है तो वे फिट होने के लिए सेल का विस्तार करते हैं। इसका मतलब है कि आपको अभी भी आकार (अधिकतम-ऊँचाई) को सीमित करने की आवश्यकता हो सकती है, या यदि पृष्ठ गतिशील है तो कोड से ऊँचाई सेट कर सकते हैं। मैं वास्तव में सिल्वरलाइट ग्रिड को याद करता हूं! :(
— कोडिंग
3
आप हमेशा टैब पंक्ति तत्व के अंदर एक बिल्कुल तैनात कंटेनर जोड़ सकते हैं फिर इसकी चौड़ाई और ऊंचाई 100% तक सेट कर सकते हैं। याद रखें कि तालिका-पंक्ति तत्व पर भी सापेक्ष स्थिति निर्धारित करें।
— माइक मेलोर
1
@MikeMellor IE11 में काम नहीं करता है, क्योंकि यह तत्व relativeपर स्थिति की अनदेखी करता table-rowहै, इसलिए पहले से तैनात आरोही की ऊंचाई लेता है जो तालिका तत्व नहीं है।
— dwelle
95

CSS केवल दृष्टिकोण (यदि ऊंचाई ज्ञात / निश्चित है)

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

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

डेमो

मान लिया गया मार्कअप और आपका CSS होना चाहिए

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;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
स्निपेट का विस्तार करें

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

बस सुनिश्चित करें कि आप height: 100%;मूल तत्वों के लिए उपयोग करते हैं।

— श्री एलियन
स्रोत
13
ओपी ने कहा कि हेडर एक मनमाना ऊंचाई हो सकता है। तो अगर आपको पहले से ऊंचाई का पता नहीं है तो आप calc का उपयोग नहीं कर पाएंगे :(
— Danield
1
@ डानिल्ड यही कारण है कि मैंने निश्चित ऊंचाई का उल्लेख किया है :)
— श्री एलियन
3
यह वह समाधान है जो मेरे लिए काम करता है और मुझे फ्लेक्सबॉक्स के आसपास मेरे मौजूदा पृष्ठों को फिर से डिज़ाइन करने की आवश्यकता नहीं थी। यदि आप LESS, अर्थात् बूटस्ट्रैप का उपयोग कर रहे हैं, तो सुनिश्चित करें कि Calc () फ़ंक्शन से बचने के लिए कोडरवल पोस्ट पढ़ें ताकि LESS इसे हैंडल न करे।
— jlyonsmith
1
ओप ने कहा 'यह एक मनमाना ऊंचाई हो सकती है'। डिजाइनर द्वारा मनमाना मतलब, इस प्रकार तय किया गया। यह समाधान अब तक सबसे अच्छा है।
— जेक
57

उपयोग किया गया: 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>
स्निपेट का विस्तार करें

— nguyên
स्रोत
1
मेरी राय में सबसे साफ समाधान। यह निश्चित रूप से जावास्क्रिप्ट जोड़ने से बेहतर है। (लेकिन जवाब पहले से ही 2015 में किसी और द्वारा पोस्ट किया गया था)
— bvdb
यह बहुत साफ लगता है।
— Theprogrammer
44

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

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>
स्निपेट का विस्तार करें

कोडपेन नमूना

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

— Zok
स्रोत
4
यह सुनिश्चित करने के लिए सबसे अच्छा जवाब है। हीरो-आईएमजी होम पेजों के लिए एक आकर्षण की तरह काम करता है, या नायक-
— इमग
jsfiddle.net/31ng75du/5 Chrome, FF, Edge, Vivaldi के साथ परीक्षण किया गया
— user2360831
यह सरल और सर्वश्रेष्ठ है।
— देव आनंद
38

आप के बारे में कैसे बस का उपयोग करें vhजो सीएसएसview height में खड़ा है ...

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>
स्निपेट का विस्तार करें

इसके अलावा, नीचे दी गई छवि देखें जिसे मैंने आपके लिए बनाया था:

शेष स्क्रीन स्थान की ऊँचाई को भरने के लिए एक div बनाएं

— एलिरेज़ा
स्रोत
10
यह केवल तभी अच्छा होता है जब आप विंडो की पूरी ऊंचाई तक एक डिव चाहते हैं। अब एक अज्ञात ऊंचाई के साथ इसके ऊपर एक हेडर डिव लगाएं।
— लैरी बड
@LarryBud आप सही कह रहे हैं, इससे रैपर दिवाने हैं, इसलिए सब कुछ इस डिव के अंदर चला जाना चाहिए ...
— Alireza
34

CSS3 सरल तरीका

height: calc(100% - 10px); // 10px is height of your first div...

इन दिनों सभी प्रमुख ब्राउज़र इसका समर्थन करते हैं, इसलिए यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता नहीं है, तो आगे बढ़ें।

— dev.meghraj
स्रोत
4
यदि आप अन्य तत्वों की ऊंचाई नहीं जानते हैं तो यह काम नहीं करता है (उदाहरण के लिए यदि उनमें एक चर संख्या होती है)।
— एग एर्सोज़
आप 100vh का उपयोग भी कर सकते हैं, कोई भी ऐसा कर सकता है: माइनस और एलिमेंट्स के बीच स्पेस देना सुनिश्चित करें
— htafoya
28

इसका 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

— Ormoz
स्रोत
2
वाह, पहले vhऔर vwइकाइयों के बारे में कभी नहीं सुना । अधिक जानकारी: snook.ca/archives/html_and_css/vm-vh-units
— स्टीव बेनेट
दुर्भाग्य से, यह
— स्कॉट
2
मैं इस दृष्टिकोण की कोशिश की है, लेकिन height: 100%पर #contentउसकी ऊंचाई की वजह से इस बात का मिलान करने के लिए #page, अनदेखी #tdcontentपूरी तरह की ऊंचाई। बहुत सी सामग्री के साथ, स्क्रॉल पट्टी पृष्ठ के नीचे से बाहर तक फैली हुई है।
— ब्रैंडन
28

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

.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;
}
<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>
स्निपेट का विस्तार करें

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

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

— जॉन कुरलक
स्रोत
धन्यवाद!!! मैंने सभी गैर-टेबल, गैर-फ्लेक्सबॉक्स उत्तरों की कोशिश की, और यह एकमात्र ऐसा है जिसने 100% सही ढंग से काम किया है। एक प्रश्न: मूल स्रोत में केवल ए है body-content-wrapper, और चीजें डबल आवरण (बिना किसी table-cellएस) के ठीक काम करने लगती हैं । क्या इस तरह से करने में कोई समस्या है?
— ब्रैंडन
1
@BrandonMintern यदि आपके पास टेबल-सेल नहीं हैं, तो यह IE8 और IE9 में काम नहीं करता है। (मूल लेख में टिप्पणी देखें।)
— जॉन कुर्लाक
हां, कोशिकाओं को IE10 में भी आवश्यक है। दुर्भाग्य से, IE10 में और उसके नीचे, .bodyऊँचाई समाप्त हो जाती है जो उस सेट पर समान ऊँचाई होती है .container। ऊर्ध्वाधर स्क्रॉलबार अभी भी सही जगह पर है, लेकिन .containerअंत में हम जितना चाहते हैं उससे बड़ा हो रहा है। जब यह फुल स्क्रीन होता है, तो स्क्रीन के नीचे .bodyसे सबसे नीचे है।
— ब्रैंडन
साभार, @JohnKurlak यह एकमात्र समाधान है जो मेरी स्थिति में काम करता है (फ्लेक्सबॉक्स तरीका मेरे क्लाइंट द्वारा उपयोग किए गए क्रोम के विशेष संस्करण में एक छोटी गाड़ी के व्यवहार से अवरुद्ध था)
— मेक्सिकम डेमीडास
पवित्र ****! मैं इतने लंबे समय से इस जवाब की तलाश में था! बहुत बहुत धन्यवाद। फ्लेक्सबॉक्स ने यहां काम नहीं किया, लेकिन टेबल-सेल ने वास्तव में किया। गजब का।
— आबक्विस्मिथ
25

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

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

— क्रिस
स्रोत
22

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

padding-bottom: 100%;
— टोनी - सच बेल प्रोडक्शंस
स्रोत
14
100% क्या? अगर मैं यह कोशिश करता हूं तो मुझे एक बड़ा खाली स्थान मिल जाता है और स्क्रॉलिंग होने लगती है।
— mlibby
व्यूपोर्ट आकार का 100% शायद @mlibby। यदि आप अपना html और शरीर 100% ऊंचाई पर भी सेट करते हैं, तो div 100% जा सकता है। केवल एक div के साथ, 100% div सामग्री के सापेक्ष होगा। मैं एक नेस्टेड div के साथ यह कोशिश नहीं की।
— जेस
1
इसका अर्थ है तत्व की ऊंचाई का 100% (तत्व की पैडिंग के रूप में जोड़ा गया), जो इसे ऊंचाई को दोगुना करता है। कोई आश्वासन नहीं कि यह पेज भर जाएगा, और निश्चित रूप से सवाल का जवाब नहीं। यह पहले से ही नोटिट के रूप में व्यूपोर्ट से अधिक भर सकता है।
— मार्टिन
2
पैडिंग-बॉटम: 100% सेट्स की ऊंचाई + 100% पैरेंट कंटेनर की चौड़ाई
— रेमनो
1
w3school से: तत्व की चौड़ाई के प्रतिशत में नीचे पैडिंग निर्दिष्ट करता है। w3schools.com/cssref/pr_padding-bottom.asp
— mehdi.loa
21

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

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 */
}

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

कोडपेन के साथ खेलने के लिए: कोडपेन के लिए लिंक

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

— माइकल पी। बाजोस
स्रोत
मुख्य {ऊंचाई: 10 पीएक्स; फ्लेक्स: 1; ओवरफ्लो: ऑटो}
— नईम बागी
2
घंटों बर्बाद करने और कई तरीकों का परीक्षण करने के बाद, यह सबसे अच्छा था! यह संक्षिप्त, सरल और स्मार्ट है।
— मार्सिबो
19

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

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

div {
    height: 100vh;
}

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

— Puiu
स्रोत
14
लेकिन 100vh सभी ऊंचाई की तरह लगता है, शेष ऊंचाई की तरह नहीं। क्या होगा यदि आपके पास एक हेडर है और आप तब बाकी को भरना चाहते हैं
— एपीरॉक्स
14 
<!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>

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

— Jerph
स्रोत
बंद करे! लगभग मैं जो चाहता हूं, सिवाय इसके कि मैं अन्य चीजों को तैनात करने जा रहा हूं div... यानी top: 0;हेडर के ठीक नीचे कुछ डालूंगा। मैं अपने प्रश्न को फिर से संशोधित करूंगा, क्योंकि आपने इसका पूरी तरह से उत्तर दिया है, और अभी भी नहीं कि मुझे क्या चाहिए! मैं केवल अतिप्रवाह छिपाऊंगा क्योंकि सामग्री फिट होनी चाहिए।
— विन्सेंट मैकनाब सेप
-1: इस सवाल का जवाब एक div बुलाया सामग्री बनाता है कि कवर पूरे स्क्रीन, नहीं बाकी स्क्रीन के
— Casebash
11

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

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

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

— मिक्को रेंटालीनें
स्रोत
11

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

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

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%;
}
— B_G
स्रोत
15
यदि आपको शीर्ष लेख की ऊंचाई का पता नहीं है तो क्या होगा?
— युगल जिंदल
10

सीएसएस ग्रिड समाधान

बस के bodyसाथ display:gridऔर grid-template-rowsउपयोग autoऔर frमूल्य संपत्ति को परिभाषित करना ।

* {
  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>
स्निपेट का विस्तार करें

ग्रिड @ CSS-Tricks.com के लिए एक पूर्ण गाइड

— Paulie_D
स्रोत
9

सिर्फ इसी तरह क्यों नहीं?

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 और बॉडी (उस क्रम में) एक ऊंचाई देते हुए और फिर अपने तत्वों को एक ऊँचाई दें?

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

— Thaoms
स्रोत
बात यह है कि यदि कोई उपयोगकर्ता इस पृष्ठ की समीक्षा करने के लिए एक बड़ी स्क्रीन का उपयोग करता है और आपके हेडर की ऊंचाई ठीक 100px है जो वर्तमान ऊंचाई के 40% से कम है, तो आपके हेडर और बॉडी संदर्भ के बीच एक बड़ा रिक्त अंतर होगा।
— सॉरीकिडो
8

आप वास्तव display: tableमें क्षेत्र को दो तत्वों (हेडर और सामग्री) में विभाजित करने के लिए उपयोग कर सकते हैं , जहां हेडर ऊंचाई में भिन्न हो सकता है और सामग्री शेष स्थान को भरती है। यह पूरे पृष्ठ के साथ काम करता है, साथ ही जब क्षेत्र बस positionसेट के साथ तैनात किसी अन्य तत्व की सामग्री है relative, absoluteया 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>
— ग्रेग
स्रोत
2
एक अच्छा जवाब, जिसे मैंने उतारा, लेकिन दुर्भाग्य से, IE8 के साथ काम नहीं करता है, जो आने वाले लंबे समय तक रहेगा।
— विंसेंट मैकनाब
जीमेल जैसे एप्लिकेशन साइजिंग के लिए जावास्क्रिप्ट का उपयोग करते हैं, जो एक बेहतर समाधान है जो कि सीएसएस वैसे भी ज्यादातर मामलों में है।
— विंसेंट मैकनब
मुझे लगता है कि वे जावास्क्रिप्ट का उपयोग कर रहे हैं क्योंकि कोई अन्य अच्छा क्रॉस-ब्राउज़र सीएसएस समाधान नहीं है, इसलिए नहीं कि यह बेहतर है।
— ग्रेग
1
@VincentMcNabb IE8 w3schools.com/cssref/pr_class_display.asp में काम करता है । बस आवश्यकता है! DOCTYPE घोषणा। प्रदर्शन विशेषता के लिए तालिका मान के बारे में भी कभी नहीं पता था। शांत समाधान। +1
— गोविंद राय
8 
 style="height:100vh"

मेरे लिए समस्या हल हो गई। मेरे मामले में मैंने इसे आवश्यक div पर लागू किया

— ज़ोहब अली
स्रोत
6

विन्सेंट, मैं आपकी नई आवश्यकताओं का उपयोग करके फिर से उत्तर दूंगा। चूंकि आप सामग्री के छिपे होने की परवाह नहीं करते हैं यदि यह बहुत लंबा है, तो आपको हेडर को फ्लोट करने की आवश्यकता नहीं है। बस html और बॉडी टैग पर छिपा हुआ ओवरफ्लो डालें, और #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>
— Jerph
स्रोत
पहले से ही इस बारे में सोचा। लेकिन यह भी काम नहीं करता है। मैं सिर्फ एक छड़ी के साथ जा रहा हूँ tableक्योंकि यह काम करता है। हालांकि अपडेट के लिए धन्यवाद।
— विंसेंट मैकनाब
5

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

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
— अरुण
स्रोत
4

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

— htho
स्रोत
4

मुझे भी यही समस्या थी लेकिन मैं ऊपर फ्लेक्सबॉक्स के साथ काम नहीं कर सकता था। इसलिए मैंने अपना टेम्प्लेट बनाया, जिसमें शामिल हैं:

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

मैंने flexboxes का उपयोग किया लेकिन अधिक सरल तरीके से, केवल गुणों के प्रदर्शन का उपयोग करके : flex और flex-direction: row | column :

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

कुंजी सभी पेरेंट्स के लिए आकार (पेरेन्ट्स में) सेट करने के लिए है ताकि उनका आकार सीमित हो सके। निम्न उदाहरण में myapp की ऊँचाई व्यूपोर्ट का 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>
— एंथोनी ब्रेनेलीयर
स्रोत
4

मोबाइल ऐप के लिए मैं केवल VH और VW का उपयोग करता हूं 

<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/

— grinmax
स्रोत
3
यह सही समाधान नहीं है। vh मोबाइल ब्राउज़रों में असंगत है। अधिक जानकारी के लिए यहां देखें: stackoverflow.com/questions/37112218/…
— HarshMarshmallow
3

श्री एलियन के विचार को काटते हुए ...

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

सामग्री ब्लॉक के लिए कैल्क () के साथ बस मिनिमल-हाइट (ऊंचाई के बजाय) का उपयोग करें।

कैल्क () 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));
}

बेशक, गणित को सरल बनाया जा सकता है लेकिन आपको इसका अंदाजा है ...

— पैट एम
स्रोत
3

बूटस्ट्रैप में:

सीएसएस शैलियाँ:

html, body {
    height: 100%;
}

1) बस शेष स्क्रीन स्थान की ऊंचाई भरें:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

[यहाँ छवि विवरण दर्ज करें

2) शेष स्क्रीन स्थान की ऊंचाई को भरें और सामग्री को मूल तत्व के मध्य में संरेखित करें:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

[यहाँ छवि विवरण दर्ज करें

— gadolf
स्रोत
1

यह पेब्बल के समाधान का मेरा अपना न्यूनतम संस्करण है। IE11 में काम करने के लिए इसे पाने की तरकीब खोजने के लिए हमेशा लिया गया। (क्रोम, फ़ायरफ़ॉक्स, एज और सफारी में भी परीक्षण किया गया है।)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
— माइकल शैड
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.