div có thể thay đổi kích thước như vùng văn bản

Question

Trình duyệt cho phép các khu vực văn bản được định kích thước lại bằng cách kéo góc của chúng theo mặc định. Tôi đã tự hỏi nếu quy tắc này có thể được áp dụng cho các yếu tố khác (một div ví dụ). Tôi biết hiệu ứng này có thể đạt được bằng cách sử dụng jQuery draggable hoặc chức năng jQuery-ui resizable, nhưng tôi muốn làm điều đó với html/css đơn giản nếu có thể tránh dựa vào thư viện đó. Có bất kỳ quy tắc CSS nào của họ mà tôi có thể áp dụng cho một div để làm cho nó hoạt động theo cách này không?

Nếu bạn có bất kỳ giải pháp nào khác, tôi muốn nghe nó.

Answer 1

Sử dụng thuộc tính css3 resize.

div { 
    resize: both; 
} 

Ngoài ra còn có resize: horizontal và resize: vertical.

---

Không hiện qua trình duyệt http://caniuse.com/#feat=css-resize

Answer 2

Bạn có thể làm điều này bằng CSS3. Bạn có thể tạo thẻ người dùng có thể thay đổi kích thước div bằng cách đặt kiểu thay đổi kích thước và tràn. tôi đã thiết lập thay đổi kích thước cho cả hai chiều ngang và dọc ở đây:

.isResizable { 
 
    background: rgba(255, 0, 0, 0.2); 
 
    font-size: 2em; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    resize: both; 
 
    width: 160px; 
 
    height: 120px; 
 
    min-width: 120px; 
 
    min-height: 90px; 
 
    max-width: 400px; 
 
    max-height: 300px; 
 
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>