Làm cách nào để chia tỷ lệ div thành 100% chiều rộng của trình duyệt?

Question

<div id="sidebar">sidebar</div> 
<div id="content">content</div> 

Thanh bên có chiều rộng cố định là 100px. Làm cách nào để tăng chiều rộng của nội dung lên 100% chiều rộng của trình duyệt?

http://jsfiddle.net/chickendance/qQQTU/1/

Answer 1

Bạn có thể làm điều này với CSS đơn giản:

#sidebar { 
    float: left; 
    width: 100px; 
} 

#content { 
    margin-left: 100px; 
} 

cập nhật với wrapper div:

HTML

<div id="wrapper"> 
    <p>wrapper</p> 
    <div id="sidebar">sidebar</div> 
    <div id="content">content</div> 
    <p>wrapper</p> 
</div> 

CSS

* { 
    /* reset */ 
    margin: 0; 
    padding: 0; 
} 
html, 
body { 
    /* for demo purposes only */ 
    height: 100%; 
} 
#wrapper { 
    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.6); 
    height: 100%; 
} 
#sidebar { 
    float: left; 
    width: 100px; 

    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.6); 
    height: 50%; 
} 
#content { 
    margin-left: 100px; 

    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.9); 
    height: 50%; 
} 

dụ làm việc: http://jsfiddle.net/kboucher/FK2tL/

Answer 2

Bạn cần phải chơi với chiều rộng% giống như phần còn lại của chúng tôi:

#content { 
     background: green; 
     float: left; 
     width: 75%; 
    } 

Tôi cũng cân nhắc việc thêm một div cha của chiều rộng: 100% theo mô hình hộp.

Answer 3

Chỉ cần thay đổi thuộc tính # content của bạn như thế này:

#content { 
      background: green; 
      float: left; 
      width: 100%; 
      margin-right: -200px; 
     } 

Vì vậy, chúng tôi đang thiết lập 100% chiều rộng như bạn yêu cầu, nhưng bù chiều rộng của hai DIV khác. Tôi đã học được mẹo này từ CSS Zen Garden.