Sự cố phần tử HTML 100% chiều rộng

Question

Khi gán một số phần tử HTML (như đầu vào biểu mẫu) 100% chiều rộng - bạn không còn có thể áp dụng bất kỳ kiểu bổ sung nào có thể ảnh hưởng đến chiều rộng. Những thứ như border hoặc padding sẽ khiến phần tử vượt quá 100%. Điều này dẫn đến các yếu tố khó xử có thể nằm ngoài các phần tử cha của chúng.

Vì CSS không hỗ trợ width: 100% - 2px; Cách duy nhất tôi biết xung quanh này là sử dụng chiều rộng pixel tuyệt đối (width: 98px) hoặc cắt phần tử ở mức 100% mà không thực sự là một tùy chọn.

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div> 

Chúng có cách nào khác không?

Answer 1

Cùng với adding another div, giải pháp sẽ sớm được sử dụng CSS 3 để thêm box-sizing attribute các quy tắc CSS. Giá trị CSS 3 mới này đã hoạt động trong IE 8 và tất cả các trình duyệt khác - vì vậy nếu bạn không nhớ bỏ qua IE 6 & 7, bạn có thể sử dụng nó ngay bây giờ!

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

Answer 2

Bạn có thể tạo vùng chứa 100% mà không cần chrome (đường viền, đệm), sau đó đặt phần tử khối bên trong, với bất kỳ chrome nào bạn muốn - phần tử khối sẽ lấp đầy tổng chiều rộng theo mặc định.

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div> 

Answer 3

Đây là một câu hỏi cũ, nhưng nó đáng nói rằng kể từ CSS3, bạn có thể sử dụng calc:

width: calc(100% - 2px);