Div zajmująca całą pozostałą szerokość

Question

Mam div jednostki nadrzędnej i 2 elementy div wewnątrz niego. Pierwszy element div dziecka ma szerokość 50 pikseli i wysokość 100%. Drugie dziecko div ma 100% wzrostu i ja zajmę resztę szerokości (100% - 50px) jak to zrobić?

Oto skrzypce, które stworzyłem: http://jsfiddle.net/muGty/ Zasadniczo chcę, aby niebieski div (po prawej) całkowicie zajął resztę szarego pojemnika.

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

Answer 1

Czy masz na myśli, jak 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%; 
} 

Aktualizacja:

Można również użyć calc() właściwość w CSS3, który ułatwi ten proces jak

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

Można dodać margines 50px do right i unoszą go.

Answer 3

Co o edytowaniu właściwą klasę, aby wyglądać tak:

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

Answer 4

Wystarczy zmienić prawo div do tego:

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

Answer 5

Można również pracować z bezwzględną pozycję na prawej stronie kolumna. Rozważmy ten przykład:

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

Zobacz te Fiddle. Zauważ, że musisz ustawić position: relative na kontenerze nadrzędnym, aby ta mogła latać.