2010-12-27 10 views
55

क्या कोई तरीका है जो मैं div के लिए पूर्ण ऊंचाई तक विस्तार करने के लिए उपयोग कर सकता हूं? मुझे इसमें एक चिपचिपा पाद लेख भी मिला है।पूर्ण ऊंचाई बढ़ाने के लिए div के लिए

यहां वेब पेज है: वेबसाइट हटा दी गई।

.midcontent{ 
    width:85%; 
    margin:0 auto; 
    padding:10px 20px; 
    padding-top:0; 
    background-color:#FFF; 
    overflow:hidden; 
    min-height:100%; 
    max-width:968px; 
    height:100%; 
} 

तो हाँ, जाहिर है height:100% काम नहीं किया: मध्यम बिट के बारे में मैं बात कर रहा हूँ सफेद div, midcontent जो सीएसएस मूल्यों है। इसके अतिरिक्त, सभी मूल कंटेनरों में ऊंचाई सेट होता है।

यहाँ सामान्य संरचना

<body> 
    <div id="wrap"> 
     <div id="main"> 
      <div class="headout"> 
       <div class="headimg"></div> 
      </div> 
      <div class="midcontainer"></div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div class="footer"></div> 
    </div> 
+0

यह एक बहुत आम सवाल है, अपने समाधान लगभग निश्चित रूप से अन्य उत्तर में पाया जाएगा: http://stackoverflow.com/search?q=css+div+100 या http://stackoverflow.com/ खोज? q = css + div + height – Ben

+2

मैंने ट्रैवल किया है, उनमें से ज्यादातर एक ही बात कहते हैं। मैंने जो कहा है, मैंने अभी भी तय नहीं किया है। – bear

+0

मुझे यकीन नहीं है कि आपका प्रश्न पर्याप्त स्पष्ट है या नहीं। क्या आप ऐसा कुछ ढूंढ रहे हैं जो "मिडकॉन्टेनर" को "हेडआउट" और "पाद लेख" के बीच * पूर्ण शेष * स्थान ले ले? क्योंकि यह निश्चित रूप से 100% – cesarsalazar

उत्तर

108

आप अपने सीएसएस में एचटीएमएल और शरीर टैग की ऊंचाई की स्थापना याद किया? यह आम तौर पर मैं कैसे मिल गया है DIVs पूरी ऊंचाई के लिए विस्तार करने के लिए है:

 

<html> 
    <head> 
    <style type="text/css"> 

     html,body { height: 100%; margin: 0px; padding: 0px; } 
     #full { background: #0f0; height: 100% } 

    </style> 
    </head> 
    <body> 
    <div id="full"> 
    </div> 
    </body> 
</html> 


 
+0

मुझे एक ही समस्या है, लेकिन हालांकि मैंने शरीर की ऊंचाई 100% निर्धारित की है, यह काम नहीं करती है। [लिंक] (http://www.cerensaner.com/) यदि आप पोर्टफोलियो पर क्लिक करते हैं, तो एक श्रेणी चुनें, और फिर थंबनेल पर क्लिक करें, एक स्लाइड शो दिखाई देता है। स्लाइड शो की पृष्ठभूमि पूरे पृष्ठ तक नहीं बढ़ती है, हालांकि इसकी ऊंचाई 100% के रूप में सेट की गई है। – sodiumnitrate

+2

मुझे लगता है कि कोड सही है, लेकिन सवाल गलत है: यह पूछना चाहिए कि क्या आप शरीर और एचटीएमएल टैग 100% पर सेट करते हैं। क्योंकि किसी भी तरह से एचटीएमएल टैग आउटपुट को विभिन्न तरीकों से भी प्रभावित कर सकता है ... –

+1

किसी भी तरह एचटीएमएल 100% केवल दृश्य स्क्रीन को कैप्चर करता है। क्रोम devtool का उपयोग, जब मैं "एचटीएमएल" तत्व का चयन करता हूं, यह दृश्य पृष्ठ के अंत में समाप्त होता है, जब मैं नीचे स्क्रॉल करता हूं जैसे कि यह अब का हिस्सा नहीं है –

34

यह कुछ मदद की हो सकता है: http://www.webmasterworld.com/forum83/200.htm

एक प्रासंगिक बोली:

अधिकांश यह पूरा करने के प्रयास संपत्ति और मान निर्दिष्ट द्वारा किए गए थे : div {ऊंचाई: 100%} - यह अकेले काम नहीं करेगा। इसका कारण यह है कि माता-पिता को ऊंचाई परिभाषित किए बिना, div {height: 100%;} में 100% प्रतिशत कारक करने के लिए कुछ भी नहीं है, और div के मूल्य डिफ़ॉल्ट होगा {ऊंचाई: ऑटो;} - ऑटो एक "जैसा है आवश्यक मूल्य "जो वास्तविक सामग्री द्वारा शासित है, ताकि div {ऊंचाई: 100%} एक = केवल सामग्री मांगों तक ही विस्तारित हो।

इस मामले में, मूल तत्व कंटेनर, को ऊंचाई मान असाइन करके समस्या का समाधान पाया जाता है। ऊंचाई को शामिल करने के लिए अपने शरीर को लिखना 100% आपूर्ति आवश्यक मूल्य।

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

के बराबर नहीं है, सभी माता-पिता के कंटेनरों की ऊंचाई: 100% 'है। – bear

+2

@ शमिल, एचटीएमएल टैग सहित सभी माता-पिता? यह आपकी समस्या हो सकती है। मैं अक्सर ग्राफिकल टैग के रूप में एचटीएमएल टैग के बारे में भूल जाता हूं। –

+0

@AlexisWilke हाँ, ऐसा हुआ - शायद ही कभी मुझे एचटीएमएल टैग – bear

0

किसी कारण से एक तत्व HTML या शरीर की ऊंचाई से लंबे गाया जा रहा है, मैं jQuery का प्रयोग करेंगे अनुभाग बड़ा करने के लिए ।

<script type="text/javascript"> 
    $($('#full').height($('#main').height())); 
</script> 
संबंधित मुद्दे