Làm thế nào để tạo chiều rộng phần tử: 100% trừ phần đệm?

Tôi có một đầu vào html.

Đầu vào padding: 5px 10px;tôi muốn nó là 100% chiều rộng của div cha (là chất lỏng).

Tuy nhiên, việc sử dụng width: 100%;nguyên nhân đầu vào là 100% + 20pxlàm thế nào tôi có thể khắc phục điều này?

Thí dụ

box-sizing: border-box là một cách nhanh chóng và dễ dàng để khắc phục nó:

Điều này sẽ hoạt động trong tất cả các trình duyệt hiện đại và IE8 +.

Đây là bản demo: http://jsfiddle.net/thundreddot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Các phiên bản tiền tố trình duyệt ( -webkit-box-sizing, v.v.) không cần thiết trong các trình duyệt hiện đại.

Đây là lý do tại sao chúng ta có box-sizingCSS.

Tôi đã chỉnh sửa ví dụ của bạn và bây giờ nó hoạt động trong Safari, Chrome, Firefox và Opera. Hãy xem thử: http://jsfiddle.net/mathias/Bupr3/ Tất cả những gì tôi đã thêm là đây:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Thật không may, các trình duyệt cũ hơn như IE7 không hỗ trợ điều này. Nếu bạn đang tìm kiếm một giải pháp hoạt động trong các IE cũ, hãy xem các câu trả lời khác.

Sử dụng phần đệm theo tỷ lệ phần trăm quá và loại bỏ từ chiều rộng:

đệm: 5%;
chiều rộng: 90%;

Bạn có thể làm điều đó mà không cần sử dụng box-sizingvà không rõ ràng giải pháp như thế nào width~=99%.

Bản demo trên jsFiddle :

• Giữ đầu vào paddingvàborder
• Thêm vào đầu vào âm ngang margin= border-width+horizontal padding
• Thêm vào chiều ngang của trình bao bọc paddingbằng với marginbước trước

Đánh dấu HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Sử dụng css calc ()

Siêu đơn giản và tuyệt vời.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Như đã thấy ở đây: Div width 100% trừ số lượng pixel cố định
Theo webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Nguồn gốc: http://web-profile.com.ua/css/dev/css -Băng thông-100prc-âm-100px /

Chỉ cần sao chép ở đây, bởi vì tôi gần như bỏ lỡ nó trong các chủ đề khác.

Giả sử tôi đang ở trong một thùng chứa có đệm 15px, đây là thứ tôi luôn sử dụng cho phần bên trong:

width:auto;
right:15px;
left:15px;

Điều đó sẽ kéo dài phần bên trong thành bất kỳ chiều rộng nào, nó phải nhỏ hơn 15px ở hai bên.

Bạn có thể thử một số thủ thuật định vị. Bạn có thể đặt đầu vào trong một div với position: relativevà chiều cao cố định, sau đó trên đầu vào cóposition: absolute; left: 0; right: 0; và bất kỳ phần đệm nào bạn muốn.

Ví dụ sống

Đây là khuyến nghị từ codeontrack.com , trong đó có các ví dụ về giải pháp tốt:

Thay vì đặt chiều rộng của div thành 100%, hãy đặt nó thành tự động và chắc chắn rằng phần đó <div>được đặt thành display: block (mặc định cho <div>).

Di chuyển phần đệm của hộp đầu vào thành phần tử bao bọc.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Xem ví dụ tại đây: http://jsfiddle.net/L7wYD/1/

Chỉ cần hiểu sự khác biệt giữa chiều rộng: tự động; và chiều rộng: 100%; Chiều rộng: tự động; sẽ (AUTO) MATICALLY tính toán chiều rộng để phù hợp với chính xác được đưa ra với div gói bao gồm cả phần đệm. Chiều rộng 100% mở rộng chiều rộng và thêm phần đệm.

Những gì về gói nó trong một container. Container shoud có kiểu như:

{
    width:100%;
    border: 10px solid transparent;
}

Thử cái này:

width: 100%;
box-sizing: border-box;

Đối với tôi, sử dụng margin:15px;padding:10px 0 15px 23px;width:100%, kết quả là thế này:

Giải pháp cho tôi là sử dụng width:autothay vìwidth:100% . Mã mới của tôi là:

margin:15px;padding:10px 0 15px 23px;width:auto. Sau đó, phần tử được căn chỉnh chính xác:

Tôi gặp vấn đề tương tự. Sửa nó như vậy:

width: 100%;
box-sizing: border-box;

Bạn có thể làm được việc này:

width: auto;
padding: 20px;