2013-01-14 32 views
27

Hãy nói rằng tôi có hai divs, một bên kia, như vậy:Có cách nào cho div "position: absolute" để giữ nguyên độ rộng tương đối không?

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="width:100%"> 
</div> 
</div> 
</body> 
</html> 

Ngay bây giờ, các div bên trong có chiều rộng 100% của 50% kích thước màn hình, hoặc 50% của màn hình kích thước. Nếu tôi thay đổi div bên trong thành vị trí tuyệt đối, như sau:

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="position:absolute;width:100%"> 
</div> 
</div> 
</body> 
</html> 

Trong trường hợp này div bên trong chiếm 100% không gian màn hình, vì vị trí của nó được đặt thành tuyệt đối.

Câu hỏi của tôi là: Có cách nào để duy trì độ rộng tương đối của div bên trong trong khi vị trí của nó được đặt thành tuyệt đối không?

Trả lời

54

Thêm vị trí: tương đối vào div bên ngoài của bạn.

cập nhật: Nó hoạt động vì vị trí trong position: absolute liên quan đến cha mẹ đầu tiên có một số vị trí (không phải tĩnh). Trong trường hợp này không có vùng chứa như vậy, vì vậy nó sử dụng trang.

+2

Thanks for the help! Điều này làm tôi khó chịu trong khoảng một giờ. Tôi rất vui vì giải pháp rất đơn giản :) – Charles

+2

OHHH AHHH !!! Tôi đã dành 5 giờ đồng hồ cố gắng sửa chữa trang web chết tiệt này mà tôi đã làm việc. Cám ơn bạn rất nhiều về điều này. Bạn có thể giải thích lý do tại sao điều này hoạt động? – Lebowski156

+1

ok, đây là trolling, nhưng trong một thời gian css có một giải pháp đơn giản cho một vấn đề đơn giản! Cảm ơn bạn! – mmuller

6

Có. Đặt bên ngoài thành vị trí: tương đối.

http://jsfiddle.net/57673/

.outer 
{ 
    width: 50%; 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 

.inner 
{ 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    border: 1px solid blue; 
} 
+0

Cảm ơn, cùng một câu trả lời như Bror! Có nó hoạt động ngay lập tức :) – Charles