CSS: Tự động thay đổi kích thước div để phù hợp với chiều rộng vùng chứa

Question

Tôi có hai <div>: còn lại và nội dung. Hai thẻ này nằm trong bộ bao bọc div có min-width:960px;. bên trái có chiều rộng cố định, nhưng tôi muốn làm cho nội dung linh hoạt với chiều rộng tối thiểu là 700px và nếu màn hình rộng hơn, hãy dán nó vào bên phải của màn hình.

CSS:

#wrapper 
{ 
    min-width:960px; 
    margin-left:auto; 
    margin-right:auto; 
} 
#left 
{ 
    width:200px; 
    float:left; 
    background-color:antiquewhite; 
    margin-left:10px; 
} 
#content 
{ 
    min-width:700px; 
    margin-left:10px; 
    width:auto; 
    float:left; 
    background-color:AppWorkspace; 
} 

JSFiddle: http://jsfiddle.net/Zvt2j/

Answer 1

Bạn có thể overflow:hidden vào số #content. Viết như thế này:

#content 
{ 
    min-width:700px; 
    margin-left:10px; 
    overflow:hidden; 
    background-color:AppWorkspace; 
} 

Kiểm tra này http://jsfiddle.net/Zvt2j/1/

Answer 2

CSS auto-fit container between float:left & float:right divs giải quyết vấn đề của tôi, cảm ơn cho bình luận của bạn.

#left 
{ 
    width:200px; 
    float:left; 
    background-color:antiquewhite; 
    margin-left:10px; 
} 
#content 
{ 
    overflow:hidden; 
    margin-left:10px; 
    background-color:AppWorkspace; 
} 

Answer 3

Tôi đã cập nhật jsfiddle của bạn và đây là CSS thay đổi bạn cần làm:

#content 
{ 
    min-width:700px; 
    margin-right: -210px; 
    width:100%; 
    float:left; 
    background-color:AppWorkspace; 
} 

Answer 4

Bạn có thể sử dụng css3 hộp linh hoạt, nó sẽ đi như thế này:

Đầu tiên trình bao bọc của bạn đang gói rất nhiều thứ để bạn cần một trình bao bọc chỉ dành cho 2 hộp nổi nằm ngang:

<div id="hor-box"> 
    <div id="left"> 
     left 
     </div> 
    <div id="content"> 
     content 
    </div> 
</div> 

và CSS3 của bạn nên là:

#hor-box{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 

-moz-box-orient: horizontal; 
box-orient: horizontal; 
-webkit-box-orient: horizontal; 

} 
#left { 
     width:200px; 
     background-color:antiquewhite; 
     margin-left:10px; 

    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
} 
#content { 
     min-width:700px; 
     margin-left:10px; 
     background-color:AppWorkspace; 

    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
     box-flex: 1; 
} 

Answer 5

#wrapper 
{ 
    min-width:960px; 
    margin-left:auto; 
    margin-right:auto; 
    position-relative; 
} 
#left 
{ 
    width:200px; 
    position: absolute; 
    background-color:antiquewhite; 
    margin-left:10px; 
    z-index: 2; 
} 
#content 
{ 
    padding-left:210px; 
    width:100%; 
    background-color:AppWorkspace; 
    position: relative; 
    z-index: 1; 
} 

Nếu bạn cần các khoảng trắng trên bên phải của #left, sau đó thêm một border-right: 10px solid #FFF;-#left và thêm 10px đến padding-left trong #content