Tôi muốn nói rằng chiều cao của vùng văn bản bằng 50% chiều cao của chế độ xem. Làm thế nào tôi có thể làm điều đó? Một đơn giản height: 50% không làm các trick.CSS: Chiều cao của vùng văn bản dưới dạng phần trăm chiều cao khung nhìn
Chiều cao đơn giản: 50% không thực hiện thủ thuật.
Không, vì bố mẹ không có chiều cao rõ ràng. Vì vậy, 50% của những gì? Phụ huynh nói ‘tự động’, có nghĩa là căn cứ vào chiều cao của nội dung trẻ em. Mà phụ thuộc vào chiều cao trên phụ huynh. Argh! v.v.
Vì vậy, bạn phải cung cấp cho phụ huynh tỷ lệ phần trăm cao. Và cha mẹ của cha mẹ, tất cả các con đường lên đến gốc. Tài liệu mẫu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
Khả năng khác nếu bạn không muốn đặt chiều cao trên mọi thứ là sử dụng vị trí tuyệt đối. Điều này thay đổi yếu tố mà thứ nguyên được dựa trên từ cha mẹ trực tiếp đến tổ tiên gần nhất với cài đặt ‘vị trí’ khác với ‘tĩnh’ mặc định. Nếu không có yếu tố tổ tiên nào có định vị thì kích thước dựa trên “Khối chứa ban đầu”, có cùng kích thước với khung nhìn.
Cuối cùng, có vấn đề tầm thường là ‘100%’ hơi quá lớn do có thêm vùng đệm và đường viền được áp dụng cho văn bản. Bạn có thể làm việc này bằng cách:
Tôi nghĩ bạn cần sử dụng javascript theo một số cách để thực hiện việc này. Xử lý sự kiện thay đổi kích thước và đặt vùng văn bản là nhiều pixel.
Bạn có thể làm điều đó nếu bạn đặt display: block. Nhưng trong html 4,01 nghiêm ngặt bạn phải xác định cols và hàng, nhưng tôi nghĩ rằng bạn có thể ghi đè lên chúng với css.
Trong khi tôi không có tất cả các trình duyệt để kiểm tra điều này, có vẻ như hầu hết chấp nhận đơn giản chỉ định chiều cao sẽ hoạt động.
Tôi đã thử nghiệm điều này trong Internet Explorer 7 và Firefox 3.0.
Đơn giản chỉ cần sử dụng đoạn mã sau:
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
(s) trình duyệt nào bạn đã gặp vấn đề với?
HTML và CSS không hoạt động tốt như vậy với chiều cao. Họ chắc chắn là nhiều hơn về di chuyển theo chiều dọc thông qua một trang chảy tự do. Tôi nghĩ JavaScript có thể là giải pháp hoàn chỉnh nhất của bạn, như FryGuy nói.
Điều này có thể không xảy ra khi câu hỏi này được hỏi, nhưng Giá trị CSS và Đơn vị Mô-đun cấp 3 bao gồm viewport-percentage lengths. Có vẻ như là not to be supported on mobile browsers except iOS.
Hãy thử loại bỏ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dưới đây là một ví dụ nhỏ của một textarea mà mất đúng 50% chiều cao khung nhìn bằng cách sử dụng CSS3 vhviewport unit đó là
Bằng 1% chiều cao của khối chứa ban đầu.
Vì vậy, nếu chúng ta thiết lập chiều cao của textarea-50vh, nó sẽ nhận được một nửa của body height:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}<textarea></textarea>Đó là pretty good supported bởi các trình duyệt khác nhau, ngoại trừ Opera mini và hỗ trợ một phần trong IE.
Xem thêm [câu hỏi này] (http://stackoverflow.com/q/7570438/113848). – legoscia
Bạn có thể thử các đơn vị xem (CSS3): http://www.w3.org/TR/css3-values/#viewport-relative-lengths –