विशिष्ट चौड़ाई

Question

वाले एक div तरफ साइडबार पर शेष चौड़ाई को कैसे लागू करें, जो मैं करना चाहता हूं वह निम्नलिखित है। मेरे पास दाईं ओर विशिष्ट चौड़ाई के साथ div#sidebar है। यह साइडबार div दाईं ओर जगह लेता है। अब मैं साइडबार के बाईं ओर शेष चौड़ाई को अन्य div#left पर लागू करना चाहता हूं।

लेकिन यह div साइडबार div के तहत ठीक से काम नहीं करता है। मैं साइडबार के मार्जिन पर div100% width होना चाहता हूं। पूरी तरफ नहीं। मैं इसे बेहतर व्याख्या करने के लिए एक छवि बना दिया:

#sidebar { 
    height: 100%; 
    width: 342px; 
    float:right; 
} 

#left { 
    float: left; 
    width: 100%; 
    height: 100%; 
} 

आशा है कि आप मेरी बात समझ:

बाद सीएसएस मैं वर्तमान में है। धन्यवाद

Answer 1

देख आप बिल्कुल स्थित कर सकते हैं एक relative कंटेनर के अंदर left:0, right: width of sidebar का उपयोग कर #left सामग्री। तो आपके पास बेहतर ब्राउज़र समर्थन होगा ...

एचटीएमएल

<div id='container'> 
<div id='left'></div> 
<div id='sidebar'></div> 
</div> 

सीएसएस

html, body { 
height:100%; 
} 
#container{ 
position:relative; 
height:100%; 
} 
#left { 
position:absolute; 
left:0; 
right:342px; 
height: 100%; 
} 
#sidebar { 
width: 342px; 
height: 100%; 
float:right; 
} 

Demo

Answer 2

आप calc का उपयोग कर सकते हैं। पढ़ें here अधिक

तो अपने #left div 100% चौड़ाई बराबर शून्य से #sidebar

#sidebar { 
    height: 100%; 
    width: 342px; 
    float:right; 
} 

#left { 
    float: left; 
    width: calc(100% - 342px); 
    width: -moz-calc(100% - 342px); 
    width: -webkit-calc(100% - 342px); 
    height: 100%; 
} 

की चौड़ाई और DEMO

Answer 3

इस कोड DEMO

<aside class="panel"> 
    ... 
</aside> 
<div class="content"> 
    ... 
</div> 

कोशिश करनी होगी सीएसएस

.content { 
    overflow: hidden; 
    border: 1px solid; 
    height:500px; 
} 
.panel { 
    float: right; 
    width: 20%; 
    border: 1px solid; 
    height:500px; 
} 

Answer 4

#sidebar { 
     height: 100%; 
     width: 342px; 
     position:fixed; 
     right:0; 
     top:0 
    } 

    #left { 
    width:100%; 
    box-sizing:border-box; 
    padding:0 342px 0 0; 
    height: 100%; 
    } 

http://jsfiddle.net/vlrprbttst/WYhz4/

Answer 5

उपयोग इस मार्कअप

<div class="container"> 
    <div class="sidebar"></div> 
    <div class="main"></div> 
</div> 

& सीएसएस:

body,html{height:100%;} 
.container{display:block; height:100%; padding:0 150px 0 0;} 
.container .main{display:block; height:100px; background:#f00;} 
.container .sidebar{display:block; float:right; width:150px; height:100%; background:#0f0; margin:0 -150px 0 0;} 

यहाँ DEMO

0 है

Answer 6

अपने सबसे आसान विकल्प .calc का उपयोग कर रहा है शायद डेमो http://jsfiddle.net/qxEzX/6/

<div id="sidebar">Sidebar 
</div> 
<div id="left">Left 
</div> 

सीएसएस

#sidebar{height: 100%; width: 342px; float: right; background: #000000;} 
#left{float: left; width: calc(100% - 342px); height: 100% background: #ff0000;}