एक html तत्व केवल css का उपयोग करके शेष स्क्रीन ऊंचाई का 100% कैसे भर सकता है?

118

मेरे पास एक हेडर तत्व और एक सामग्री तत्व है:

#header
#content

मैं चाहता हूं कि हेडर निश्चित ऊंचाई का हो और स्क्रीन पर उपलब्ध सभी शेष ऊंचाई को भरने के लिए सामग्री हो overflow-y: scroll;।

यह जावास्क्रिप्ट के बिना संभव है?

html css

— सताना
स्रोत

83

इस पर चाल html और शरीर तत्वों पर 100% ऊंचाई निर्दिष्ट कर रहा है। कुछ ब्राउज़र ऊँचाई की गणना करने के लिए मूल तत्वों (html, body) को देखते हैं।

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

— BentOnCoding
स्रोत

1

मैंने सभी समाधान की कोशिश की लेकिन केवल इसने मेरे मुद्दे को हल किया।

— एलेक्स

1

@ एलेक्स अगर यह आपके द्वारा लक्षित सभी ब्राउज़रों के लिए काम करता है, तो हर तरह से आगे बढ़ें और इसे लागू करें। हर किसी की जरूरतें अलग-अलग होती हैं।

— बेंटऑनकोडिंग

321

सभी उत्तरों को भूल जाएं, सीएसएस की इस पंक्ति ने मेरे लिए 2 सेकंड में काम किया:

height:100vh;

1vh = ब्राउज़र स्क्रीन ऊंचाई का 1%

स्रोत

उत्तरदायी लेआउट स्केलिंग के लिए, आप उपयोग करना चाह सकते हैं:

min-height: 100vh

[अद्यतन नवम्बर २०१8] जैसा कि टिप्पणियों में बताया गया है, न्यूनतम ऊंचाई का उपयोग करने से पुन: डिजाइन के मुद्दे होने से बच सकते हैं

[अपडेट अप्रैल 2018] जैसा कि टिप्पणियों में बताया गया है, 2011 में जब सवाल पूछा गया था, तब सभी ब्राउज़रों ने व्यूपोर्ट इकाइयों का समर्थन नहीं किया था। अन्य उत्तर तब समाधान थे - vmaxअभी भी IE में समर्थित नहीं है, इसलिए यह सभी के लिए सबसे अच्छा समाधान नहीं हो सकता है।

— सेबस्टियन एच।
स्रोत

9

यह सबसे सरल उत्तर है, क्योंकि आपको सभी मूल तत्वों की ऊंचाई 100% निर्धारित करने की आवश्यकता नहीं है। यहाँ vh - caniuse.com/#feat=viewport-units - iOS के लिए वर्तमान समर्थन को स्पष्ट रूप से वर्कअराउंड की आवश्यकता हो सकती है, क्योंकि "iOS पर vh को ऊंचाई गणना में नीचे टूलबार की ऊंचाई शामिल करने की सूचना है"।

— ब्रायन बर्न्स

2

वाह, अच्छा लगा! इन सभी लोगों को अधिक जटिल उत्तरों के साथ देखें।

— नोनेम

8

जब 2011 में सवाल पूछा गया था, तो किसी भी प्रमुख ब्राउज़र ने व्यूपोर्ट इकाइयों का समर्थन नहीं किया। उन "अधिक जटिल जवाब" के बाद वापस एकमात्र विकल्प थे।

— JJJ

6

मामूली सुझाव है कि min-height: 100vhएक बहुत बेहतर होगा। यह उत्तरदायी डिजाइनों के लिए भी पैमाना होगा।

— विगि ए।

3

यह पूछे गए सवाल का जवाब नहीं देता है, यह व्यूपोर्ट का 100% तक ले जाएगा। वह यह नहीं चाहता है कि उसके शीर्षलेख व्यूपोर्ट का x% ले लेंगे, क्योंकि ऐसे अन्य उत्तर सही हैं।

— 4

35

वास्तव में सबसे अच्छा तरीका यह है:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

यह मेरे लिए सब कुछ हल करता है और इससे मुझे अपने फूटर को नियंत्रित करने में मदद मिलती है और अगर पेज को नीचे स्क्रॉल किया जा रहा है तो यह निश्चित पाद हो सकता है।

तकनीकी समाधान - EDITED

ऐतिहासिक रूप से, 'ऊँचाई' सबसे आसान, 'चौड़ाई' की तुलना में ढालना मुश्किल है। चूंकि <body>स्टाइल के लिए css फोकस काम करने के लिए है। उपरोक्त कोड - हमने दिया <html>और <body>एक ऊंचाई। यह जहां जादू चित्र में आता है - के बाद से हम खेल मेज पर 'न्यूनतम-ऊंचाई' है, हम ब्राउज़र है कि कह रहे हैं <body>बेहतर खत्म हो गया है <html>क्योंकि <body>न्यूनतम-ऊंचाई रखती है। यह बदले में, <body>ओवरराइड करने की अनुमति देता है <html>क्योंकि <html>पहले ही ऊंचाई थी। दूसरे शब्दों में, हम ब्राउज़र को <html>टेबल से "टक्कर" करने के लिए ट्रिक कर रहे हैं , इसलिए हम स्वतंत्र रूप से स्टाइल कर सकते हैं।

— Faron
स्रोत

1

हे भगवान यह एक चमत्कार है!

— ज्योफ

चमत्कार की तरह, यह काम करता है! लेकिन कृपया: क्यों min-heightऔर height?

— जॉय

1

@ShajiangCai - ऐतिहासिक रूप से, 'चौड़ाई', सबसे आसान, 'चौड़ाई' की तुलना में ढालना मुश्किल है। चूंकि <body>स्टाइल के लिए css फोकस काम करने के लिए है। यह कोड: हमने दिया <html>और <body>एक ऊंचाई। यह जहां जादू चित्र में आता है - के बाद से हम खेल मेज पर 'न्यूनतम-ऊंचाई' है, हम सर्वर है कि कह रहे हैं <body>बेहतर खत्म हो गया है <html>क्योंकि <body>न्यूनतम-ऊंचाई रखती है। यह बदले में, <body>ओवरराइड करने की अनुमति देता है <html>क्योंकि <html>पहले ही ऊंचाई थी। दूसरे शब्दों में, हम सर्वर को <html>टेबल से "बम्प" करने के लिए ट्रिक कर रहे हैं , इसलिए हम स्वतंत्र रूप से स्टाइल कर सकते हैं।

— फरान

2

@Faron ऐसा लगता है जैसे 'ब्राउज़र' 'सर्वर' के बजाय यहाँ एक बेहतर शब्द विकल्प होगा। ;)

— 15

@EunLeem ... मैं आपसे इस बात पर सहमत हूं कि मैं इसे संबोधित करने के लिए उचित शब्द कैसे चुन सकता था। "एल्बो-बम्प" टिप के लिए धन्यवाद। तदनुसार मेरा उत्तर अपडेट करें।

— फरान

14

आप न्यूनतम-ऊंचाई की संपत्ति पर vh का उपयोग कर सकते हैं।

min-height: 100vh;

आप निम्नानुसार कर सकते हैं, इस बात पर निर्भर करता है कि आप मार्जिन का उपयोग कैसे कर रहे हैं ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

— अल्मीडा कैवलैंटे
स्रोत

10

स्वीकृत समाधान वास्तव में काम नहीं करेगा। आप देखेंगे कि सामग्री divउसके माता-पिता की ऊंचाई के बराबर होगी body। तो bodyऊंचाई 100%निर्धारित करने के लिए इसे ब्राउज़र विंडो की ऊंचाई के बराबर सेट करना होगा। मान लें कि ब्राउज़र विंडो 768pxऊंचाई में थी, सामग्री की divऊँचाई को निर्धारित करके 100%, इसकी divऊँचाई बदले में होगी 768px। इस प्रकार, आप शीर्ष लेख div 150pxऔर सामग्री div जा रहा है के साथ समाप्त होगा 768px। अंत में आपके पास पृष्ठ के 150pxनीचे की सामग्री होगी । एक अन्य समाधान के लिए, इस लिंक को देखें।

— dykstrad
स्रोत

8

HTML5 के साथ आप यह कर सकते हैं:

सीएसएस:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

— मिगुएल
स्रोत

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

— TomDK

4

मेरे लिए, अगले ने अच्छा काम किया:

मैंने हेडर और सामग्री को एक डिव पर लपेटा

<div class="main-wrapper">
    <div class="header">

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

    </div>
</div>

फ्लेक्सबॉक्स के साथ ऊंचाई भरने के लिए मैंने इस संदर्भ का उपयोग किया । सीएसएस इस तरह से जाता है:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

फ्लेक्सबॉक्स तकनीक के बारे में अधिक जानकारी के लिए, संदर्भ देखें

— क़मी बनाने की मशीन
स्रोत

1

आप पैरेंट को भी सेट कर सकते हैं display: inline। Http://codepen.io/tommymarshall/pen/cECyH देखें

सुनिश्चित करें कि html और शरीर की ऊँचाई 100% होनी चाहिए, भी।

— tommymarshall
स्रोत

लिंक-केवल उत्तर हतोत्साहित किए जाते हैं। कृपया अपने उत्तर में लिंक सामग्री को संक्षेप में प्रस्तुत करने का प्रयास करें

— उपयोगकर्ता जो

1

स्वीकृत उत्तर काम नहीं करता है। और उच्चतम मतदान का उत्तर वास्तविक प्रश्न का उत्तर नहीं देता है। एक निश्चित पिक्सेल ऊंचाई हेडर, और ब्राउज़र के शेष प्रदर्शन में एक भराव, और owerflow के लिए स्क्रॉल करें। यहां एक समाधान है जो वास्तव में काम करता है, पूर्ण स्थिति का उपयोग करके। मैं यह भी मानता हूं कि हेडर की ऊंचाई ज्ञात है, प्रश्न में "फिक्स्ड हेडर" की ध्वनि से। मैं यहां एक उदाहरण के रूप में 150px का उपयोग करता हूं:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

सीएसएस: (केवल दृश्य प्रभाव के लिए पृष्ठभूमि-रंग जोड़ना)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

अधिक विस्तृत रूप से यह देखने के लिए कि यह कैसे काम करता है, वास्तविक सामग्री के साथ #Content, इस jsfiddle पर एक नज़र डालें , बूटस्ट्रैप पंक्तियों और स्तंभों का उपयोग करें।

— jumps4fun
स्रोत

"फिक्स्ड पिक्सेल ऊंचाई हेडर" -> यह बिल्कुल! bottomसंपत्ति लगता है कि बनाया #Contentरहता पृष्ठ के अंत में अटक गया। मैं आपको इसकी व्याख्या करने के लिए समय देने की सराहना करता हूं।

— 15

1

और मुझे खुशी है कि इसने किसी की मदद की;)

— कूदता है

1

इस उदाहरण में, मैं चाहता हूं कि मेरी मुख्य सामग्री div तरल ऊंचाई की हो ताकि पूरा पृष्ठ ब्राउज़र की ऊँचाई का 100% हो।

height: 100vh;

— फजल हलई
स्रोत

1

कृपया मुझे अपने 5 सेंट यहाँ जोड़ने और एक शास्त्रीय समाधान की पेशकश:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

स्निपेट का विस्तार करें

यह सभी ब्राउज़रों में काम करेगा, कोई स्क्रिप्ट नहीं, कोई फ्लेक्स नहीं। पूर्ण पृष्ठ मोड में स्निपेट खोलें और ब्राउज़र का आकार बदलें: पूर्ण स्क्रीन मोड में भी वांछित अनुपात संरक्षित हैं।

ध्यान दें:

विभिन्न पृष्ठभूमि रंग वाले तत्व वास्तव में एक दूसरे को कवर कर सकते हैं। यहां मैंने यह सुनिश्चित करने के लिए ठोस सीमा का इस्तेमाल किया कि तत्वों को सही तरीके से रखा जाए।
idHeader.heightऔर idContent.topसीमा को शामिल करने के लिए समायोजित किया जाता है, और यदि सीमा का उपयोग नहीं किया जाता है तो उनका समान मूल्य होना चाहिए। अन्यथा तत्व व्यूपोर्ट से बाहर खींच लेंगे, क्योंकि गणना की गई चौड़ाई में सीमा, मार्जिन और / या पैडिंग शामिल नहीं है।
left:0; right:0;width:100%उसी कारण से प्रतिस्थापित किया जा सकता है , यदि कोई सीमा उपयोग नहीं की जाती है।
अलग पेज में परीक्षण (स्निपेट के रूप में नहीं) के लिए किसी HTML / बॉडी एडजस्टमेंट की आवश्यकता नहीं है।
IE6 और पहले के संस्करणों में हमें तत्व को जोड़ना padding-topऔर / या padding-bottomविशेषताओं को शामिल करना चाहिए #idOuter।

मेरा उत्तर पूरा करने के लिए, यहाँ पाद लेआउट है:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

स्निपेट का विस्तार करें

और यहाँ हेडर और पाद दोनों के साथ लेआउट है:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

स्निपेट का विस्तार करें

— दिमित्री बेबिच
स्रोत

0

जब तक आपको IE 9 और नीचे का समर्थन करने की आवश्यकता नहीं होती है, मैं फ्लेक्सबॉक्स का उपयोग करूंगा

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

आपको पूरे पृष्ठ को भरने के लिए शरीर प्राप्त करने की भी आवश्यकता है

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

— जेम्स लैंबर्ट
स्रोत

0

सीएसएस प्लाय | क्रॉस ब्राउज़र फिक्स्ड हेडर / फुटर / सेंटेड सिंगल कॉलम लेआउट

सीएसएस फ्रेम्स, संस्करण 2: उदाहरण 2, निर्दिष्ट चौड़ाई | 456 बेरिया स्ट्रीट

एक महत्वपूर्ण बात यह है कि हालांकि यह आसान लगता है, इस तरह से एक प्रभाव प्राप्त करने के लिए आपकी सीएसएस फ़ाइल में काफी बदसूरत कोड होने वाला है। दुर्भाग्य से, यह वास्तव में एकमात्र विकल्प है।

— जो
स्रोत

लिंक-केवल उत्तर हतोत्साहित किए जाते हैं। अपने उत्तर में कोड को शामिल करने का प्रयास करें।

— उपयोगकर्ता

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

— जज़ीब खान
स्रोत

-1

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

HTML फ़ाइल

<div id="contents"></div>
<div id="footer"></div>

सीएसएस फ़ाइल

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Js फ़ाइल (jquery का उपयोग करके)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

आप प्रत्येक विंडो के आकार की सामग्री तत्व की ऊँचाई को अपडेट करना भी पसंद कर सकते हैं, इसलिए ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

— Αλέκος
स्रोत

-1

बहुत आसान:

#content {
    max-height: 100%;
}

— मसूद
स्रोत

-3

क्या आपने कुछ इस तरह की कोशिश की है?

सीएसएस:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

— राहुल चौधरी
स्रोत