सीएसएस डिव चौड़ाई प्रतिशत और गद्दी लेआउट

Question

को तोड़ने के बिना इस के लिए उन्हें आसानी से ठीक हो सकता है, लेकिन अब यह उम्र के लिए मुझे परेशान किया गया है ...

मैं स्थिति स्पष्ट करते हैं। मेरे पास आईडी 'कंटेनर' वाला एक div है जिसमें पृष्ठ में सभी सामग्री (हेडर और फ़ूटर समेत) भी शामिल है जो सब कुछ इनलाइन रखेगी और मैं केवल 1 सरल 'मार्जिन: 0 ऑटो;' कर सकता हूं। गुणक के बजाय। तो मान लें कि मेरे पास # कंटेनर की चौड़ाई 80% है। अब अगर मैं एक ही चौड़ाई (80%) के साथ एक और div डालता हूं और इसे 'हेडर' की आईडी को चारों ओर पैडिंग के साथ देता हूं, तो लेआउट "ब्रेक" (इसलिए बोलने के लिए) होगा क्योंकि पृष्ठ पैडिंग राशि को जोड़ता है चौड़ाई। तो, मैं #header div के लिए कम प्रतिशत जैसे तरीकों का उपयोग किये बिना इसे बाध्य कैसे बना सकता हूं? असल में, मैं इसे तरल पदार्थ बनाना चाहता हूं।

यहाँ आप मैं क्या बात कर रहा हूँ की एक विचार देने के लिए कुछ उदाहरण कोड ...

सीएसएस

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
} 
#header { 
    position:relative; 
    width:80%; 
    height:50px; 
    padding:10px; 
} 

एचटीएमएल

<div id="container"> 
    <div id="header">Header contents</div> 
</div> 

किसी को भी मदद कर सकते हैं मुझे इस मुद्दे से बाहर निकलना है जो मुझे हमेशा के लिए परेशान कर रहा है?

Answer 1

आप #header गद्दी की 10px के साथ, अपने कंटेनर के रूप में ही चौड़ाई होना चाहते हैं, तो आप इसकी चौड़ाई घोषणा बाहर छोड़ सकते हैं। इससे यह पूरी तरह से अपने पूरे माता-पिता की चौड़ाई को ले जाएगा (क्योंकि एक div डिफ़ॉल्ट रूप से ब्लॉक स्तर तत्व है)।

तब, जब से तुम उस पर एक चौड़ाई निर्धारित नहीं किया है, गद्दी की 10px ठीक से तत्व के अंदर लागू किया जाएगा, बल्कि इसकी चौड़ाई को जोड़ने से:

#container { 
    position: relative; 
    width: 80%; 
} 

#header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
} 

आप इसे in action here देख सकते हैं।

कुंजी चौड़ाई और पिक्सेल पैडिंग/मार्जिन का उपयोग करते समय कुंजी उसी तत्व पर परिभाषित नहीं करना है (यदि आप आकार को सटीक रूप से नियंत्रित करना चाहते हैं)। माता-पिता को प्रतिशत चौड़ाई लागू करें और फिर पिक्सेल पैडिंग/मार्जिन display: block बच्चे को कोई चौड़ाई सेट न करें।

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    /* Since this element now uses border-box sizing, the 10px of horizontal 
     padding will be drawn inside the 80% width */ 
    width: 80%; 
    padding: 0 10px; 
} 

यहाँ एक पोस्ट कैसे box-sizing works बारे में बात कर रहा है:

---

अद्यतन

इस से निपटने के लिए एक अन्य विकल्प box-sizing CSS नियम का प्रयोग है।

Answer 2

को हटाने header से position और overflowcontainer में जोड़ने का प्रयास करें:

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
    overflow:auto; 
} 
#header { 
    width:80%; 
    height:50px; 
    padding:10px; 
}