width: 100% với position: absolute (css)

Question

Nếu bạn làm:

<div style="width:auto;background:red;color:white">test</div> 

Bạn nhận được một div được kéo dài để lấp đầy toàn bộ chiều rộng màn hình (100%).

Đó là những gì tôi cần phải xảy ra.

Tuy nhiên, tôi cũng cần vị trí bắt đầu được đặt .. Vì vậy, tôi cần vị trí: tuyệt đối.

Khi tôi thêm vị trí: tuyệt đối, chiều rộng của div chỉ rộng bằng nội dung bên trong .. (Tương tự như phao). Có cách nào để khắc phục điều này?

tôi có thể không chỉ cần xác định width: 100% vì đây không đưa vào tài khoản kích thước biên giới, vv ..

Cảm ơn, Wesley

Answer 1

Khi tôi thêm vị trí: tuyệt đối, chiều rộng của div chỉ rộng bằng nội dung bên trong .. (Tương tự như phao). Có cách nào xung quanh điều này không?

tôi không thể chỉ cần xác định width: 100% vì đây không mất trong kích thước biên giới tài khoản, vv ..

Bạn có thể sử dụng position:absolute; left:0; right:0; top:0.

Như thế này: http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

Bạn có thể sử dụng width: 100% và hộp thuộc tính css kích thước, để có được mô hình hộp làm việc như IE 5.5, tức là đệm và biên giới tính vào chiều rộng.

div.absolute { 
    width: 100%; 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; top: 100px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 50px; 
} 

Dưới đây là một fiddle: http://jsfiddle.net/dJtm2/

Hãy cảnh giác mặc dù, vì nó là một thuộc tính CSS3 tương đối mới và sẽ chỉ làm việc trong các trình duyệt mới hơn, và như bạn có thể nhìn thấy từ ví dụ của tôi đòi hỏi phải có biện pháp phản tác dụng đáng sợ đó là tiền tố của nhà cung cấp.

Answer 3

chỉ đơn giản là viết như thế này:

div.absolute { 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; 
    top: 100px; 
    padding: 50px; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/dJtm2/1/

trong padding & border này không làm tăng chiều rộng của phần tử.