CSS: Chiều rộng hoạt động như phần trăm như thế nào?

Question

Tôi đang có những gì tôi nghĩ là một vấn đề lạ. Tôi có một div, bên trong một div cha, và tôi đang cho div con một chiều rộng là 100%, nhưng nó không phát triển đến kích thước của div cha.

div cha mẹ không không có chiều rộng được đặt dưới bất kỳ hình thức nào. Vì vậy, câu hỏi của tôi: không chiều rộng trong tỷ lệ phần trăm chỉ làm việc khi một yếu tố phụ huynh có một chiều rộng thiết lập, hoặc nó sẽ phát triển không?

Làm rõ:

Một số có thể tự hỏi làm thế nào các div cha mẹ có chiều rộng tăng lên ở tất cả, nếu nó tự nó không có một chiều rộng quy định. Lý do là tôi có các anh chị em khác của phần tử con bên trong div cha, với chiều rộng được đặt cho chúng, do đó div cha đã phát triển để đáp ứng các chiều rộng anh chị em đó.

MÃ MẪU:

<div id="parent-div"> 
    <div id="child-element" style="width: 100%">Content</div> 
    <div id="sibling" style="width: 250px"></div> 
</div> 

yếu tố trẻ em không phát triển để đáp ứng các div cha mẹ. Chiều rộng của 100% về bản chất là không làm bất cứ điều gì ở tất cả mà tôi có thể nói. Đây là trong IE7.

Cảm ơn.

THEO D 01I: Cảm ơn mọi người vì câu trả lời. Tôi đang bận thử nghiệm vào cuối. Ban đầu tôi nghĩ rằng div cha mẹ chỉ phát triển rộng như con cái của họ, nhưng hóa ra tôi đã sai khi đưa ra ví dụ trên, mà tôi đã mã hóa chỉ để chứng minh vấn đề của tôi. Trong trường hợp của tôi, div mẹ của tôi có một số position: fixed và bottom: 1px và right: 1px áp dụng cho nó. Từ các thử nghiệm của tôi, điều này dường như thay đổi hành vi của div cha. Không còn nó tự động kéo dài đến toàn bộ chiều rộng của trang, nhưng giả định hành vi mà tôi nghĩ là trường hợp nào, đó là div cha mở rộng chỉ đủ để chứa con rộng nhất của nó. Vì vậy, đó là hành vi mà tôi đang thấy bây giờ, nhưng chỉ vì div cha mẹ của tôi có một vị trí cố định.

Answer 1

Đây thực sự là mẹo lừa. Nó giống như thế này:

Nếu bạn đặt vị trí div gốc thành vị trí tương đối và vị trí con div thành div tuyệt đối thì div con sẽ vẫn nằm trong div cha mặc dù vị trí của chúng tuyệt đối.

Xem: Absolute Positioning Inside Relative Positioning để được giải thích thêm.

Cảm ơn

Answer 2

Ảnh chụp màn hình này giải thích cách đo được đo bằng CSS. Xin lỗi người Pháp, đó là từ máy tính của tôi.

padding, margin and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

đâu "Marge" có nghĩa là margin, "bordure" có nghĩa là border và "espacement" có nghĩa là padding. Margin rơi xung quanh border, lần lượt rơi xung quanh padding, lần lượt rơi xung quanh kích thước phần tử thực tế. Trong ví dụ này (được thực hiện bằng cách kiểm tra câu trả lời tràn ngăn xếp <textarea> thẻ) cho thấy rằng không có lề, đường viền rộng 1px và có khoảng đệm 3px giữa đường biên của <textarea> và nội dung của nó; và kích thước nội dung có thể sử dụng, ngoại trừ phần đệm, là 660x200. Kích thước này khớp với thuộc tính CSS width và height.

Từ phần tử lồng nhau, bạn chỉ có thể chiếm kích thước phần tử thực. Padding trên phụ huynh sẽ làm cho các mục lồng nhau của bạn để giữ một lề. Điều đó có nghĩa là vẫn có thể có khoảng trống giữa đường viền của lồng nhau và đường viền của đường viền của nó.

Nếu bạn muốn bạn lồng <div> để đưa tất cả các phòng nó có thể, bạn phải thiết lập thuộc tính margin của nó để 0px và padding tài sản của mẹ để 0px là tốt.

Answer 3

Nếu không thấy phần còn lại của CSS và HTML, tôi sẽ giả định rằng những gì bạn đã đăng là tất cả trong HTML và CSS của bạn.

Trong trường hợp đó:

• mẹ-div chắc chắn sẽ rộng như trang, nghĩa là 100%.
• con phần tử cũng sẽ rộng như các trang, tức là 100%, và được bên cha mẹ-div
• anh chị em sẽ có chiều rộng 250px và được bên dưới yếu tố con

Nếu đây là không phải vậy, bạn đã can thiệp vào HTML hoặc CSS khác.

Answer 4

Khi zneak chỉ ra, đừng quên đặt lại mô hình hộp css; xem this great article on understanding the box model.

#parent div { 
    padding: 0; 
    margin: 0; 
} 

Chỉ cần chỉ ra, đừng quên để thiết lập

#child-element { 
    display: block; 
} 

như bạn có thể thiết lập nó để inline một nó sẽ không mở rộng đến 100% chiều rộng của cha mẹ.

Tôi không thể sao chép vấn đề của bạn, mọi thứ hoạt động tốt.