ऊँचाई क्यों नहीं होती: स्क्रीन ऊँचाई तक divs का विस्तार करने के लिए 100% काम?

295

मैं चाहता हूं कि हिंडोला DIV (s7) संपूर्ण स्क्रीन की ऊंचाई तक विस्तारित हो। मुझे अंदाजा नहीं है कि यह सफल क्यों नहीं हो रहा है। पेज देखने के लिए आप यहाँ जा सकते हैं ।

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

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

html css height

— अर्ल लार्सन
स्रोत

2

यहाँ एक सरल और स्पष्ट विवरण दिया गया है: stackoverflow.com/a/31728799/3597276

— माइकल बेंजामिन

शायद नेस्टेड तत्वों के लिए सबसे अच्छा समाधान जो पूरी खिड़की की ऊंचाई पर नहीं होना चाहिए stackoverflow.com/questions/7049875/height-100-not-working/…

— B-GangsteR

409

ऊंचाई के लिए काम करने के लिए प्रतिशत मूल्य के लिए, माता-पिता की ऊंचाई निर्धारित की जानी चाहिए। एकमात्र अपवाद रूट तत्व है <html>, जो एक प्रतिशत ऊंचाई हो सकता है। ।

तो, आपने अपने सभी तत्वों को ऊँचाई दे दी है, सिवाय इसके <html>, कि आपको क्या करना चाहिए:

html {
    height: 100%;
}

और आपका कोड ठीक काम करना चाहिए।

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

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

JsFiddle उदाहरण ।

— मदारा का भूत
स्रोत

23

ठीक है, तो यह मुझे अविश्वसनीय रूप से बेवकूफ लग सकता है, लेकिन जो भी हो : क्या आपका मतलब यह <html>है कि एक वास्तविक तत्व है - जैसे <p>या <img />? मैंने सोचा था कि <html>एक HTML दस्तावेज़ की शुरुआत और अंत को परिभाषित करना एकमात्र उद्देश्य था। मेरा मतलब है, मैंने सोचा था कि यह वहां था, लेआउट के लिए नहीं, लेकिन बस इतना है कि ब्राउज़र को पता है कि यह किस प्रकार का दस्तावेज़ देख रहा है? मैं पूरी तरह से दिमाग वाला हूं।

— jay_t55

29

@Joey: HTML है एक वास्तविक तत्व। आप इसे सीएसएस के साथ स्टाइल कर सकते हैं, जावास्क्रिप्ट में इसे हुक कर सकते हैं, इसमें कक्षाएं और आईडी जोड़ सकते हैं और यह डोम में दिखाई देता है। ब्राउज़र भी बिना एक HTML दस्तावेज समझेंगे <html>टैग, और यहां तक कि बिना <head>या <body>तत्वों। HTML चश्मा हालांकि, <html>टैग को अनिवार्य बनाता है। संक्षेप में, हाँ, यह अन्य HTML तत्वों की तरह एक पूर्ण तत्व है।

— मदारा का भूत

1

@ SecondRikudo: नहीं, <html>टैग ऐनक के अनुसार वैकल्पिक है (जैसे HTML4 और HTML5)। और हाँ, तत्व वैसे भी बनाया जाता है।

— रॉबर्ट सिएमर

2

हममम ... मेरे लिए, एक ही रास्ता यह काम किया गया था दोनों सेट करने के लिए htmlऔर bodyके रूप में height: 100%(साथ ही पाठ्यक्रम विशिष्ट के रूप में divमैं 100% ऊंचाई प्राप्त करना चाहते हैं)

— जेम्स

1

@ जैम्स हां, सभी माता-पिता को एक ज्ञात ऊंचाई होनी चाहिए।

— मदारा का भूत

147

_{चूंकि किसी ने इसका उल्लेख नहीं किया है।}

आधुनिक दृष्टिकोण:

html/ bodyतत्व की ऊँचाई दोनों को सेट करने के विकल्प के रूप में 100%, आप व्यूपोर्ट-प्रतिशत लंबाई का भी उपयोग कर सकते हैं:

5.1.2। व्यूपोर्ट-प्रतिशत लंबाई: 'vw', 'vh', 'vmin', 'vmax' इकाइयाँ

व्यूपोर्ट-प्रतिशत लंबाई प्रारंभिक ब्लॉक वाले आकार के सापेक्ष है। जब प्रारंभिक युक्त ब्लॉक की ऊंचाई या चौड़ाई को बदल दिया जाता है, तो उन्हें तदनुसार स्केल किया जाता है।

इस उदाहरण में, आप मान का उपयोग कर सकते हैं 100vh(जो व्यूपोर्ट की ऊंचाई है) - (उदाहरण)

body {
    height: 100vh;
}

एक सेटिंग min-heightभी काम करती है। (उदाहरण)

body {
    min-height: 100vh;
}

ये इकाइयां अधिकांश आधुनिक ब्राउज़रों में समर्थित हैं - समर्थन यहां पाया जा सकता है ।

— जोश क्रोज़ियर
स्रोत

1

मुझे इसका कोई फायदा नहीं दिख रहा है। क्या यह उस ब्राउज़र के लिए अतिरिक्त कार्य नहीं बनाता है जिसे ब्राउज़र व्यूपोर्ट से संबंधित सभी चीजों की गणना करने की आवश्यकता है? जब आप वास्तव में ब्राउज़र की ऊँचाई से संबंधित किसी चीज़ को आकार देना चाहते हैं, तो व्यूपोर्ट साइज़िंग केवल फायदेमंद लगती है।

— रॉबर्ट वेंट

12

@RobertWent लाभ हैं। उदाहरण के लिए, height: 100%केवल तभी काम करता है जब मूल तत्व में परिभाषित ऊँचाई हो। निश्चित रूप से कुछ मामले हैं जहां एक तत्व के माता-पिता के पास परिभाषित ऊंचाई नहीं होती है और व्यूपोर्ट प्रतिशत इकाइयां इसका समाधान करती हैं। दूसरे शब्दों में, यदि आपके पास एक गहरा नेस्टेड तत्व था, तो आप बस सेट कर सकते हैं 100vh, और इसमें 100%ब्राउज़र की ऊंचाई होगी । आप कोई लाभ नहीं देख सकते हैं, लेकिन मैं कई मामलों में रहा हूं जहां वे एकमात्र समाधान थे। ये इकाइयाँ जड़ तत्वों जैसे html/ के लिए फायदेमंद नहीं हो सकती हैं body, लेकिन फिर भी, यह एक विकल्प है

— जोश क्रोज़िएर

2

लेकिन हम शरीर के तत्व के बारे में बात कर रहे हैं, न कि एक गहन नेस्टेड तत्व के बारे में। केवल एक ही संभव अभिभावक है, html तत्व। यही कारण है कि मैंने उल्लेख किया कि मुझे कोई लाभ नहीं दिखता है और यह संभवतः केवल 100% स्थापित करने से भी बदतर है। आपकी टिप्पणी मुझे पतले बनाने के लिए कुछ नहीं कहती है। सिर्फ इसलिए कि कुछ नया है यह बेहतर नहीं बनाता है। यह हालांकि, एक विकल्प है।

— रॉबर्ट विन

4

इस दृष्टिकोण के साथ एक मुद्दा यह है कि iPhones एड्रेस बार और नीचे की नेविगेशन को दृश्य ऊंचाई से बाहर कर देता है, जिसका अर्थ है body { height: 100vh }प्रारंभिक पृष्ठ लोड पर एक स्क्रॉल बार होगा।

— BHOLT

2

अच्छा लगा। मैंने दूसरे दृष्टिकोण की कोशिश की, मैंने डाल दियाheight: 100% !important" to each parent til html` को सफलता के बिना , मैं डोम में देख सकता था कि पेड़ का हर नोड वास्तव में था, 100%लेकिन मैं वांछित तत्व में 100% सेट करने का प्रबंधन नहीं कर सका, लेकिन व्यूपोर्ट शैली के साथ आसान था

— पीरंदा

25

आपको htmlतत्व पर 100% ऊंचाई निर्धारित करने की आवश्यकता होगी :

html { height:100%; }

— shanethehat
स्रोत

20

वैकल्पिक रूप से, यदि आप उपयोग करते हैं position: absoluteतो height: 100%ठीक काम करेगा।

— स्टीव टाउबर
स्रोत

4

अगर मैं अपने लेआउट को बनाने के लिए फ्लेक्सबॉक्स का उपयोग नहीं कर रहा था, तो एक बहुत बड़ी समस्या होगी। : /

— लैंडन कॉल

2

सेट width:100%;और माता-पिता को मत भूलना position:relative;।

— काई नैक

8

आपको मूल तत्वों के साथ प्रयास करना चाहिए;

html, body, form, main {
    height: 100%;
}

तब यह पर्याप्त होगा:

#s7 {
   height: 100%;
}

— mrbengi
स्रोत

5

यदि आप चाहते हैं, उदाहरण के लिए, एक बाएं स्तंभ (ऊंचाई 100%) और सामग्री (ऊंचाई ऑटो) जिसका आप पूर्ण उपयोग कर सकते हैं:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

HTML में:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
स्रोत

2

यह आदर्श नहीं हो सकता है, लेकिन आप इसे जावास्क्रिप्ट के साथ कर सकते हैं। या मेरे मामले में jQuery के

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— OBO
स्रोत

5

कभी भी जावास्क्रिप्ट का उपयोग करने के लिए एक अच्छा विचार नहीं है जब अकेले सीएसएस पर्याप्त होगा।

— Bosworth99

1

यहां तक कि ऐसा कुछ क्यों करें और इसे जितना हो सके उससे अधिक जटिल करें? मैं कुछ जवाब समझ में नहीं आता lol ...

— CapturedTree

1

पृष्ठ स्रोत में मैं निम्नलिखित देखता हूं:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

यदि आप टैग में ऊंचाई मान रखते हैं, तो यह इसका उपयोग सीएसएस फ़ाइल में परिभाषित ऊंचाई के बजाय करेगा।

— स्टीवन
स्रोत

यह अजीब है क्योंकि यह वह है जो मैं पृष्ठ स्रोत में देखता हूं: <div class = "धारक"> <tr> <td> <div id = "s7"> <div id = "posts">

— अर्ल लार्सन

ठीक है, जबकि मुझे नहीं पता कि आपको अपना उपरोक्त कोड कैसे मिला, मैं अंदर गया और <div id = "s7"> से <div id = "s7" शैली = "ऊँचाई: 100%;"> और यह काम कर गया। शायद यह मुझसे कुछ छिपा रहा है? किसी भी तरह से thankyou :)

— अर्ल लार्सन

1

यदि आप div के अंदर के तत्वों को पूरी तरह से स्थिति में रखते हैं, तो आप पैडिंग टॉप और बॉटम को 50% पर सेट कर सकते हैं।

तो कुछ इस तरह:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— कीथ ब्राउन
स्रोत

1

मैं नहीं देखता कि यह कैसे काम कर सकता है क्योंकि 50% चौड़ाई वाले तत्व के सापेक्ष नहीं है, या मैं यहां कुछ याद नहीं कर रहा हूं?

— DrLightman

0

यहां उन लोगों के लिए एक और समाधान है जो उपयोग नहीं करना चाहते हैं html, body, .blah { height: 100% }।

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

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

— TheMisir
स्रोत