Div per occupare tutta la larghezza rimanente

Question

Ho un div genitore e 2 div al suo interno. Il primo div figlio è largo 50px e altezza 100%. Il div di secondo figlio è al 100% di altezza e io per prendere il resto della larghezza (100% - 50px) come faccio?

Ecco il violino che ho creato: http://jsfiddle.net/muGty/ Fondamentalmente voglio div blu (a destra) per occupare completamente il resto del contenitore grigio.

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

Answer 1

Intendi come this?

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

CSS

html, body { 
    height: 100%; 
} 

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

Aggiornamento:

È inoltre possibile utilizzare calc() proprietà in CSS3, che faciliterà questo processo come

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

Si potrebbe aggiungere un margine di 50px per right e galleggiare.

Answer 3

Che ne modifica la classe giusta per farlo sembrare come questo:

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

Answer 4

Basta cambiare il tuo div diritto a questo:

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

Answer 5

Si potrebbe anche lavorare con una posizione assoluta per il lato destro colonna. Considerare questo esempio:

.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 
} 

Vedere anche questo Fiddle. Si noti che è necessario impostare position: relative sul contenitore padre affinché questo voli.