2010-06-26 11 views
12

में ऊंचाई 100% मुझे एक पक्षपातपूर्ण समस्या है जिसमें क्रोम में 100% की ऊंचाई नहीं मिलती है। यह एफएफ में ठीक काम करता है। इमक्रोम

html, body { 

padding: 0px; 
width: 100%; 
height: 100%; 

} 

#div { 

    min-height: 100%; 
} 

कि क्यों है का उपयोग कर?

+0

आप एचटीएमएल और शरीर के आयामों को निर्दिष्ट नहीं कर सकते हैं। एचटीएमएल एक डिस्प्ले तत्व भी नहीं है, और बॉडी में सभी डिस्प्ले तत्व –

+14

@ जैमी वोंग शामिल हैं: सच नहीं है, अगर आप एचटीएमएल और बॉडी निर्दिष्ट नहीं करते हैं तो आपको 100% ऊंचाई नहीं मिल सकती है – Diadistis

+0

@ डिडियािस्टिस गलत मैं हूं - http:/संदर्भ के लिए /www.webmasterworld.com/forum83/7559.htm संदर्भ –

उत्तर

12

यह हर ब्राउज़र पर मेरे लिए एकदम सही काम करता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>min-height test</title> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; background-color: gray; } 
    </style> 
</head> 
<body> 
    <div id="div">test</div> 
</body> 
</html> 

आप अधिक जानकारी प्रदान कर सकते हैं?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>min-height test</title> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; } 
    .contents { height: 100%; width: 780px; margin-left: auto; 
       margin-right: auto; text-align: left; } 
    #right { float: left; width: 217px; min-height: 100%; background:#4b805b; } 
    </style> 
</head> 
<body> 
    <div class="contents"> 
     <div id="right">test</div> 
    </div> 
</body> 
</html> 

फिर भी सब कुछ Chrome, Firefox और IE8

+0

मुझे नहीं पता कि यह और क्या जोड़ना है कंटेनर // के सभी सीएसएस है I वास्तव में पता नहीं है कि स्टैक ओवरफ्लो सॉरी के लिए कोड कैसे प्रारूपित करें! # दाएं { \t फ्लोट: बाएं; \t चौड़ाई: 217 पीएक्स; \t न्यूनतम ऊंचाई: 100%; \t \t पृष्ठभूमि: # 4b805b; } और यह छेद शरीर/एचटीएमएल एचटीएमएल, शरीर { \t पैडिंग: 0px; \t मार्जिन: 0 पीएक्स; \t ऊंचाई: 100%; \t टेक्स्ट-संरेखण: केंद्र; \t } शरीर { \t फ़ॉन्ट-परिवार: "ताहोमा सीई", "एरियल सीई", "हेल्वेतिका सीई", ताहोमा, एरियल, लुसीडा, सैन्स-सेरिफ़; \t फ़ॉन्ट-आकार: 12 पीएक्स; \t पृष्ठभूमि: यूआरएल (छवियों/बीके.जेपीजी) दोहराना-एक्स तय; \t } – andrei

+2

कृपया अपना प्रश्न संपादित करें और एचटीएमएल का एक छोटा संस्करण प्रदान करें। आपका एचटीएमएल लेआउट क्या मायने रखता है, न कि आपका सीएसएस। – Diadistis

+0

मैं वास्तव में ऐसा नहीं कर सकता, मैंने कोड नहीं लिखा है (जो एक गड़बड़ बीटीडब्ल्यू है) मैं सिर्फ डीबगर हूं (क्या तथ्य यह है कि साइडबार को php के माध्यम से शामिल किया गया है, इसके साथ कुछ करने के लिए कुछ है?) – andrei

10

http://doctype.com/give-two-nested-divs-100-minheight से:

चाइल्ड तत्व पैरेंट कंटेनर की ऊंचाई केवल अगर यह स्पष्ट रूप से निर्दिष्ट है इनहेरिट करती है। लेकिन न्यूनतम ऊंचाई ऊंचाई का एक स्पष्ट विनिर्देश नहीं है, इसलिए गणना की गई ऊंचाई "ऑटो" है और 100% नहीं है।

+0

वाह, तो उत्तर ** ऊंचाई ** और ** न्यूनतम ऊंचाई ** ** ** ** ** ** दोनों सेट करना है? या सिर्फ ** ऊंचाई ** और ** न्यूनतम ऊंचाई ** बाहर छोड़ दें? – harpo

3

के लिए ठीक है आप के साथ अपने माता पिता के बारे में बताने की दिखता है:

संपादित

यहाँ उपलब्ध कराई गई जानकारी के आधार पर अद्यतन संस्करण है 100% ऊंचाई के साथ-साथ बच्चे

html,body{ 
    height: 100%; 
} 
#div{ 
     min-height: 100%; 
    height: auto !important; 
    height: 100%; /*for IE*/ 
} 

! महत्वपूर्ण सभी अन्य ऊंचाई नियमों को ओवरराइट करेगा। कोशिश करें कि आपको कोई समस्या नहीं होनी चाहिए। नीचे कोड के साथ

+0

एक ही समस्या थी, यह तय है। कम से कम कोशिश करो। निश्चित नहीं है कि जब मैं पहले नहीं था तो अचानक मुझे यह समस्या क्यों हो रही थी। – Kirk

0

चेक, काम करने और मुद्रण Zebra GC420d लेबल प्रिंटर के तहत मेरे लिए ठीक लेबल:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div style="border: 0px solid red;"> 
    <table border="0" width="100%" align="center"> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo $name; 
    ?> 
    </td> 
    </tr> 
    <tr><td></td></tr> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo 'https://goo.gl/2QvRXf'; 
    ?> 
    </td> 
    </tr> 

    </table> 
    </div> 

    </body> 
    </html> 

आशा है कि यह मदद करता है!