css - एक div को शेष स्क्रीन स्पेस की ऊंचाई भरें




html html-table (20)

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

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

मेरे पास हेडर 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>

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

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

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

अद्यतन करें:

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

अद्यतन 2:

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


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

एचटीएमएल 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 */
}

उपरोक्त समाधान व्यूपोर्ट इकाइयों और http://caniuse.com/#feat=flexbox का उपयोग करता है, और इसलिए IE10 + है, जो आपको IE10 के लिए पुराने वाक्यविन्यास का उपयोग प्रदान करता है।

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

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


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

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

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

Demo

अनुमानित मार्कअप

<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%; मूल तत्वों के लिए।



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

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

div {
    height: 100vh;
}

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


आप क्षेत्र को दो तत्वों (हेडर और सामग्री) में विभाजित करने के लिए वास्तव में display: table उपयोग कर सकते हैं, जहां शीर्षलेख ऊंचाई में भिन्न हो सकता है और सामग्री शेष स्थान भरती है। यह पूरे पृष्ठ के साथ काम करता है, साथ ही साथ जब क्षेत्र केवल स्थिति के साथ position किसी अन्य तत्व की सामग्री को 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>

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

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

प्रयुक्त: 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>


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

मार्कअप

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

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

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

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

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

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

मुख्य घटक में 9 0% व्यूपोर्ट है, क्योंकि हेडर और पाद लेख में 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>

मूल पोस्ट 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" 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>


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

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


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

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

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%;
}

यदि आप पुराने ब्राउज़र (यानी, एमएसआईई 9 या पुराने) का समर्थन नहीं कर सकते हैं, तो आप इसे http://caniuse.com/#feat=flexbox साथ कर सकते हैं जो पहले से ही डब्ल्यू 3 सी सीआर है। वह मॉड्यूल अन्य अच्छी चाल भी देता है, जैसे कि पुन: ऑर्डर करने वाली सामग्री।

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

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


यह vh का उपयोग कर CSS द्वारा पूरी तरह से किया जा सकता है:

#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 की आवश्यकता होने पर समाधानों में से कोई भी पोस्ट पोस्ट नहीं किया जाता है। यहां एक समाधान है जो उस मामले में काम करता है:

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 लाइव पूर्वावलोकन


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

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

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

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


CSS3 सरल तरीका

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

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



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.

यहां पूरा उदाहरण है कि यह कैसे करें (सफारी / फ़ायरफ़ॉक्स / आईई / आईफोन / एंडोरिड (रोटेशन के साथ काम करता है) में काम करता है):

सीएसएस

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>

 style="height:100vh"

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





html-table