निश्चित तत्वों के लिए प्रतिशत चौड़ाई?

Question

मैं इस तरह एचटीएमएल है:

<div id='content'> 
    <div id='first'>...</div> 
    <div id='second'>...</div> 
</div> 

#content 
{ 
    width:100%; 
    position:relative; 
    padding:20px; 
} 

#first 
{ 
    width:70%; 
    position:relative; 
} 

#second 
{ 
    width:70%; 
    position:fixed; 
} 

इस थोड़ा व्यापक होने के लिए दूसरे div का कारण बनता है पहले div से (40px सटीक होना करने के लिए) है, क्योंकि पहली div के 70% सामग्री की चौड़ाई के संबंध में (के साथ है जो प्रत्येक तरफ 20px की पैडिंग 100% कम है)।

दूसरे div का 70% क्या संदर्भित करता है? मैं इसे कैसे बना सकता हूं ताकि दो divs एक ही चौड़ाई हो?

Answer 1

मैं एक पूर्ण चौड़ाई जावास्क्रिप्ट का उपयोग कर #first की गणना चौड़ाई का पता लगाने के लिए सेट करें।

Answer 2

CSS 2.1 Positioning Scheme spec के अनुसार:

हाथ में, प्रक्षेपण, स्क्रीन, tty, और टीवी मीडिया प्रकार के मामले में, बॉक्स व्यूपोर्ट के संबंध में तय हो गई है ...

इससे मुझे विश्वास होता है कि 70% आप सेटिंग कर रहे हैं वास्तव में व्यूपोर्ट का 70% है।

जहां तक ​​इसे अन्य div के समान चौड़ाई बनाते हैं, शायद आप जावास्क्रिप्ट का उपयोग कर सकते हैं (या स्पष्ट रूप से चौड़ाई निर्दिष्ट कर सकते हैं)।

Answer 3

पहला div का 70% #content की चौड़ाई का 70% संदर्भित करता है।

दूसरा div का 70% व्यूपोर्ट की चौड़ाई का 70% संदर्भित करता है।

html, body { 
    margin:0; padding:0 
} 

Live Demo

Answer 4

यह अजीब व्यवहार (बड़ा सवाल !!) तथ्य यह है कि रिश्तेदार के बारे में कहा जा सकता है:

आप इस सीएसएस जोड़ते हैं, तो दो div के एक ही चौड़ाई div (पहले) अपने पिता को चौड़ाई लेते हैं। दूसरा दूसरा व्यूपोर्ट को देखता है, कोई फर्क नहीं पड़ता कि उसका पिता कौन है (और उसके पिता को कितनी चौड़ाई निर्धारित है)!

यह आपकी समस्या का समाधान कर सकते हैं:

body,html{ 
    padding:0; 
} 

संपादित करें ->Fiddle