पूरे शेष चौड़ाई को लेने के लिए div

Question

मेरे पास एक मूल div और 2 divs है। पहला बच्चा div 50px चौड़ा और 100% ऊंचाई है। दूसरा बच्चा div 100% ऊंचाई है और मैं इसे चौड़ाई (100% - 50 पीएक्स) लेने के लिए कैसे करूँ?

यहां मैंने जो पहेली बनाई है वह है: http://jsfiddle.net/muGty/ असल में मैं भूरे रंग के कंटेनर को पूरी तरह से कब्जा करने के लिए नीली div (दाएं) चाहता हूं।

<div class="parent"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

Answer 1

क्या आपका मतलब this है?

<div id="left"> 
</div> 
<div id="right"> 
</div> 

सीएसएस

html, body { 
    height: 100%; 
} 

#left { 
    width:200px; 
    float:left; 
    background: #f00; 
    height: 100%; 
} 
#right { 
    margin-left: 200px; 
    background: #0f0; 
    height: 100%; 
} 

अद्यतन:

तुम भी CSS3 में calc() संपत्ति का उपयोग कर सकते है, जो

html, body { 
    height: 100%; 
} 

#left { 
    width:200px; 
    float:left; 
    background: #f00; 
    height: 100%; 
} 

#right { 
    float: left; 
    background: #0f0; 
    height: 100%; 
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */ 
} 

Demo 2

की तरह इस प्रक्रिया को कम करेगा

Answer 2

आप right करने के लिए एक 50px मार्जिन जोड़ने और इसे तैर सकती हैं।

Answer 3

क्या अपने सही वर्ग संपादन यह ऐसा दिखाई बनाने के बारे में:

.right{ 
    float:left; 
    height:50px; 
    width: 100%; 
    margin-right:-50px; 
    background-color: blue; 
    display:inline-block; 
} 

Answer 4

बस इस के लिए अपने अधिकार div बदलने के लिए:

.right{ 
    float:left; 
    height:50px; 
    width: calc(100% - 50px); 
    background-color: blue; 
    display:inline-block; 
} 

Answer 5

तुम भी सही पक्ष के लिए एक पूर्ण स्थिति के साथ काम कर सकता था स्तंभ। इस उदाहरण पर विचार करें:

.parent{ 
    width:100%; 
    height:50px; 
    background:#888; 
    position:relative 
} 
.left{ 
    float:left; 
    height:100%; 
    width:50px; 
    background:green 
} 
.right{ 
    background:red; 
    position:absolute; 
    bottom:0; 
    left:50px; 
    right:0; 
    top:0 
} 

यह भी देखें Fiddle। ध्यान दें कि इसे उड़ने के लिए आपको मूल कंटेनर पर position: relative सेट करना होगा।