Div để chiếm toàn bộ chiều rộng còn lại

Question

Tôi có div cha và 2 div bên trong nó. Div con đầu tiên rộng 50px và chiều cao 100%. Thứ hai con div là 100% chiều cao và tôi nó để có phần còn lại của chiều rộng (100% - 50px) làm thế nào để tôi làm điều đó?

Đây là câu đố mà tôi đã tạo: http://jsfiddle.net/muGty/ Về cơ bản tôi muốn div xanh (phải) chiếm phần còn lại của vùng chứa màu xám hoàn toàn.

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

Answer 1

Ý của bạn là 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%; 
} 

Cập nhật:

Bạn cũng có thể sử dụng calc() tài sản trong CSS3, mà sẽ giảm bớt quá trình này như

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

Bạn có thể thêm lề 50px vào right và làm nổi.

Answer 3

gì về chỉnh sửa lớp phải của bạn để làm cho nó trông như thế này:

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

Answer 4

Chỉ cần thay đổi div quyền của quý vị như sau:

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

Answer 5

Bạn cũng có thể làm việc với một vị trí tuyệt đối cho phía bên phải cột. Hãy xem xét ví dụ này:

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

Xem thêm điều này Fiddle. Lưu ý rằng bạn sẽ cần phải đặt position: relative trên vùng chứa chính để điều này bay.