CSS Div tỷ lệ chiều rộng và đệm mà không vi phạm bố trí

Question

Có thể có một sửa chữa đơn giản cho điều này, nhưng nó đã gặp rắc rối tôi cho các lứa tuổi bây giờ ...

Hãy để tôi giải thích tình hình. Tôi có một div với ID 'container' chứa tất cả các nội dung trong trang (bao gồm cả đầu trang và chân trang cũng) mà sẽ giữ cho mọi thứ nội tuyến và tôi có thể làm chỉ 1 đơn giản 'margin: 0 auto;' thay vì bội số. Vì vậy, hãy nói rằng tôi có chiều rộng #container được đặt thành 80%. Bây giờ nếu tôi đặt một div bên trong với cùng chiều rộng (80%) và đặt cho nó ID của 'header' với 10px padding xung quanh, layout sẽ "break" (để nói) vì trang thêm số padding lên chiều rộng. Vì vậy, làm thế nào tôi có thể làm cho nó ở trong giới hạn mà không sử dụng các phương pháp như một tỷ lệ thấp hơn cho div #header? Về cơ bản, tôi muốn làm cho nó trở nên trôi chảy.

Dưới đây là một số mã ví dụ để cung cấp cho bạn một ý tưởng về những gì tôi đang nói về ...

CSS

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
} 
#header { 
    position:relative; 
    width:80%; 
    height:50px; 
    padding:10px; 
} 

HTML

<div id="container"> 
    <div id="header">Header contents</div> 
</div> 

Can bất cứ ai giúp đỡ tôi ra với vấn đề này đã được bugging tôi mãi mãi?

Answer 1

Nếu bạn muốn #header là chiều rộng tương tự như container của bạn, với 10px của đệm, bạn có thể bỏ qua tuyên bố chiều rộng của nó. Điều đó sẽ làm cho nó ngầm chiếm toàn bộ chiều rộng của bố mẹ nó (vì div là một phần tử mức khối mặc định).

Sau đó, vì bạn chưa xác định chiều rộng trên nó, 10px padding sẽ được áp dụng đúng cách trong phần tử, chứ không phải thêm vào chiều rộng của nó:

#container { 
    position: relative; 
    width: 80%; 
} 

#header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
} 

Bạn có thể nhìn thấy nó in action here.

Khoá khi sử dụng độ rộng phần trăm và pixel/lề pixel không được xác định trên cùng một phần tử (nếu bạn muốn kiểm soát chính xác kích thước). Áp dụng chiều rộng phần trăm cho phụ huynh và sau đó là điểm đệm/lề pixel cho một số trẻ em không có chiều rộng được đặt là display: block.

---

Cập nhật

Một tùy chọn khác để đối phó với điều này là sử dụng các quy tắc box-sizing CSS:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    /* Since this element now uses border-box sizing, the 10px of horizontal 
     padding will be drawn inside the 80% width */ 
    width: 80%; 
    padding: 0 10px; 
} 

Dưới đây là một bài nói về cách box-sizing works.

Answer 2

Cố gắng loại bỏ các position từ header và thêm overflow-container:

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
    overflow:auto; 
} 
#header { 
    width:80%; 
    height:50px; 
    padding:10px; 
}