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

Question

ब्राउज़रों की एक विस्तृत श्रृंखला में 100% न्यूनतम ऊंचाई का एक तत्व बनाने का सबसे अच्छा तरीका क्या है?

विशेष रूप से आप एक साथ एक लेआउट है, तो headerऔर footerतय की height,

आप 100%बीच footerसे नीचे तक तय की गई जगह के बीच की सामग्री को कैसे भरते हैं ?

Comments

आप विचार कर सकते हैं min-height: 100vh;। इस सेट ऊंचाई के बराबर या स्क्रीन के आकार के लिए अधिक से अधिक, vh: vertical height। अधिक जानकारी के लिए: w3schools.com/cssref/css_units.asp ।

— स्टैनिस्लाव

बस एक स्पष्टीकरण के रूप में, vhके लिए खड़ा है viewport heightऔर इसलिए आप भी उपयोग कर सकते हैं vwके लिए viewport widthऔर vmin, जो भी आयाम के लिए सबसे छोटा है viewport minimum।

— २१

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

— sboisse

आप इसे Flexbox के साथ प्राप्त कर सकते हैं। उदाहरण देखें ।

— रेग्गी पिंकहम

अब एक दिन '100vh' आकर्षण की तरह काम करता है

— Awais

Answer 1

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

मिन-ऊंचाई

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

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

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

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

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

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

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

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

Comments

उस उदाहरण पर IE7 में फ़ॉन्ट आकार (Ctrl + "+") को बढ़ाने की कोशिश की गई और उस चिपचिपे पाद को बर्बाद कर दिया :(

— विटाली

यह IE9 में काम नहीं करता है ... क्या यह अन्य IE में काम करता है?

— विलियम नीयू

Answer 2

कहीं पर बंद एक कस्टम ऊंचाई सेट करने के लिए:

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>

Answer 3

यहां सीएसएस इकाइयों पर जाने के विवरण के आधार पर एक और समाधान है 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>

इकाइयाँ vw, vh, vmax, vmin हैं। मूल रूप से, प्रत्येक इकाई व्यूपोर्ट आकार के 1% के बराबर है। इसलिए, जैसा कि व्यूपोर्ट में परिवर्तन होता है, ब्राउज़र उस मूल्य की गणना करता है और तदनुसार समायोजित करता है।

आपको अधिक जानकारी यहाँ मिल सकती है:

विशेष रूप से:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Answer 4

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

Answer 5

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

डेमो पेज

Comments

अच्छा BUT अगर डेमो में div की सामग्री ब्राउज़र विंडो की तुलना में अधिक ऊँचाई पर है, तो स्क्रॉल डाउन होने के बाद बैकग्राउंड कट जाएगा

— fider

@fider - कृपया आपके द्वारा बताए गए मुद्दे को दिखाते हुए एक खेल के मैदान की आपूर्ति करें।

— विस्कॉन्सिन

jsbin.com/nixuf/1/edit नीचे स्क्रॉल करें। मैं इस में उपयोगी जानकारियां पाया पोस्ट नीचे

— fider

Answer 6

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

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

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

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

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

Answer 7

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

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

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

Answer 8

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

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

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

और सीएसएस:

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

Answer 9

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

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

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

Answer 10

संभवतः सबसे छोटा समाधान (केवल आधुनिक ब्राउज़रों में काम करता है)

CSS का यह छोटा सा टुकड़ा बनाता है "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>

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

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

Answer 11

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

Answer 12

बस जो मैंने उपयोग किया है उसे साझा करें, और अच्छी तरह से काम करता है

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

Answer 13

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

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. 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);
}