Hai cột, bên trái có chiều rộng cố định, phải với chiều rộng động

Question

Tôi đang cố gắng triển khai nội dung mà tôi cần có một phần 100% chiều rộng của trình duyệt và bên trong nó tôi cần phải có kích thước bên trái một div Chiều rộng 200px và đúng là tôi cần có một div có chiều rộng động tùy thuộc vào chiều rộng của trình duyệt. Ví dụ .. trình duyệt = 900px -> div bên trái 200px phải div 700px. Và cả hai divs có chiều cao năng động tùy thuộc bao nhiêu thông tin tôi đặt vào họ .. div wrapper sẽ mất lớn nhất của những chiều cao 2 div ..

Cho đến nay tôi đã làm một cái gì đó giống như html này

<section id="wrapper"> 
    <div id="list"> 
    </div> 
    <div id="grid"> 
    </div> 
</section> 

css

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 0; 
    overflow: hidden; 
} 

Bây giờ tôi cần phải css cáC#list và divs #grid. Tôi hy vọng có một giải pháp hiệu quả cho điều này vì sau này tôi sẽ có cùng một thứ để làm bên trong #grid div :)

Cảm ơn bạn trước, Daniel!

Answer 1

Bạn có thể làm điều đó bằng CSS. Bí quyết là sử dụng một phao (div bên trái) và một div không trôi nổi (bên phải). Ngoài div bên trái (nổi), cần phải có chiều cao tối thiểu, nếu không div phải (không nổi) sẽ chiếm không gian của cột bên trái nếu bên trái không có bất kỳ nội dung nào.

EDIT: Quyền <div> cũng cần phải có các quy tắc sau:

overflow: hidden; 
display: block; 

Các overflow: hidden làm cho quyền div cư xử như một cột, nếu không nội dung của nó sẽ chảy quanh div trái.

Lưu ý rằng #wrapper không cần chiều rộng vì chiều rộng mặc định là <div> là 100% (vì bạn nói nó sẽ chiếm toàn bộ chiều rộng của cửa sổ trình duyệt) và cũng có thể loại bỏ các lề của nó.

Đây là một ví dụ (Tôi đã thay đổi <section> thành <div> vì lợi ích của các trình duyệt không phải HTML5 nhưng hoạt động giống nhau).

Tôi đã đặt màu nền để phân biệt tất cả các phần tử.

http://jsfiddle.net/pmv3s/1/

Dưới đây là phiên bản màn hình đầy đủ: http://fiddle.jshell.net/pmv3s/1/show/light/

CSS:

#wrapper { 
    padding: 40px 0; 
    overflow: hidden; 
    background-color: red; 
    min-height: 5px; 
} 
#list { 
    float: left; 
    width: 200px; 
    background-color: green; 
    overflow: hidden; 
    min-height: 100px; 
} 
#grid { 
    display: block; 
    float: none; 
    background-color: blue; 
    min-height: 100px; 
    overflow: hidden;  
} 

Answer 2

Đây là giải pháp cho bạn sử dụng một chút jQuery vì tôi không nghĩ rằng có một giải pháp CSS thuần túy cho vấn đề của bạn (nhưng tôi có thể sai).

http://fiddle.jshell.net/L32uj/