Bên trong div 100% chiều rộng của div cha vượt quá giới hạn

Question

Tôi biết điều này có thể là một vấn đề bình thường nhưng tôi đã không tìm thấy một giải pháp trong trang web này cũng không phải những người khác.

tôi đã fiddle này: http://jsfiddle.net/xzdead/jxsYx/3/

Nội div 'div_mainPanel' là 100% chiều rộng, nhưng nếu bạn nhìn vào góc bên phải phía dưới nó trên div cha mẹ.

Tôi haver đã cố gắng xóa chiều rộng: 100 cho vấn đề div và chiều rộng bên trong được giải quyết nhưng không phải chiều cao. Dù sao tại sao nó phát triển ra khỏi div cha mẹ nếu tôi đã thiết lập wodth đến 100% và margin-padding được thiết lập để 0px?

Cảm ơn trước

Answer 1

Số đếm biên để tính toán kích thước. Div bên trong của bạn chọn 100% chiều cao/chiều rộng của bố mẹ, vì vậy nó sẽ trở thành 500x300, nhưng sau đó thêm 2px xung quanh cho đường viền, vì vậy nó thực sự 502x302 và rò rỉ trên đường viền của phụ huynh ở cạnh phải/dưới.

Answer 2

thats vì thuộc tính border vượt quá 100% ... giống như giá trị padding.

đó là lý do tại sao 2px của nó ra.

Answer 3

Đây là hành vi đúng. Div bên trong được đặt thành 100% chiều rộng của cha mẹ, nhưng điều này không bao gồm đường viền trên đó, vì vậy nó là 100% + 2px.

Để ngăn chặn các div bên trong được hiển thị bên ngoài bờ cõi của các phụ huynh, thêm box-sizing: border-box cho cả phụ huynh và trẻ em:

#div_mainContainer { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: #f8f8f8; 
 
    border: 1px solid red; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
#div_mainPanel { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    border: 1px solid yellow; 
 
    box-sizing: border-box; 
 
}

<div id="div_mainContainer"> 
 
    <div id="div_mainPanel"></div> 
 
</div>

Answer 4

Thuộc tính biên giới không được tính bằng chiều rộng của hộp hoặc. Vì vậy, hộp của bạn thực sự được tính là 100% + 2px cho đường viền. Đối với chiều rộng, chỉ cần xóa width: 100% vì bộ phận (phần tử cấp khối) sẽ tự động mở rộng để lấp đầy chiều rộng của vùng chứa, tốt hơn chiều rộng 100% có thể làm (vì nó sẽ xem xét đệm, đường viền và lề).

Nếu bạn luôn sử dụng chiều cao chính xác trên vùng chứa chính, tại sao không chỉ sử dụng chiều cao chính xác 498px trên con, sẽ tính tổng chiều cao 500px cho trẻ.

Answer 5

Hiện nay, một cách tốt hơn để giải quyết vấn đề này: sử dụng border-box kích thước cho CSS của bạn:

http://paulirish.com/2012/box-sizing-border-box-ftw/

Bây giờ 100% sẽ là một cách tự nhiên nhiều hơn nữa để thiết lập kích thước của phần tử con.