Je voudrais dire que la hauteur d'une zone de texte est égale, disons, à 50% de la hauteur de la fenêtre. Comment puis je faire ça? Un simple height: 50% ne fait pas l'affaire.CSS: Hauteur de la zone de texte en pourcentage de la hauteur de la fenêtre d'affichage
Une hauteur simple: 50% ne fait pas l'affaire.
Non, car son parent n'a pas de hauteur explicite. Donc 50% de quoi? Parent dit 'auto', ce qui signifie baser sur la hauteur du contenu enfant. Ce qui dépend de la hauteur sur le parent. Argh! etc.
Vous devez donc donner à ses parents une hauteur en pourcentage. Et le parent du parent, jusqu'à la racine. Exemple doc:
<!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>
L'autre possibilité si vous ne voulez pas avoir à régler la hauteur sur tout est d'utiliser le positionnement absolu. Cela modifie l'élément sur lequel les dimensions sont basées du parent direct à l'ancêtre le plus proche avec un paramètre "position" autre que "statique" par défaut. S'il n'y a aucun élément ancêtre avec positionnement, les dimensions sont basées sur le "bloc contenant initial", qui a la même taille que la fenêtre. Enfin, le problème trivial de '100%' est légèrement trop grand à cause du rembourrage supplémentaire et de la bordure appliquée aux zones de texte. Vous pouvez contourner ce problème en:
Je pense que vous avez besoin d'utiliser javascript d'une façon ou d'une autre pour le faire. Gérez l'événement de redimensionnement et définissez la zone de texte sur autant de pixels.
Vous pouvez le faire si vous définissez display: block. Mais en html 4.01 strict, vous devez définir des cols et des lignes, mais je pense que vous pouvez les remplacer par css.
Bien que je n'ai pas tous les navigateurs pour tester cela, il semble que la plupart des gens acceptent simplement de spécifier la hauteur devrait fonctionner. J'ai testé cela dans Internet Explorer 7 et Firefox 3.0.
suffit d'utiliser le code suivant:
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
Quel navigateur (s) avez-vous des problèmes avec?
HTML et CSS ne sont pas si bons pour faire ce genre de choses avec des hauteurs. Ils sont certainement plus sur le défilement vertical à travers une page fluide. Je pense que JavaScript est susceptible d'être votre solution la plus complète, comme le dit FryGuy.
Cela n'était probablement pas possible lorsque cette question a été posée, mais le module Valeurs CSS et unités de niveau 3 comprend viewport-percentage lengths. Il semble not to be supported on mobile browsers except iOS, cependant.
Essayez enlever
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Voici un petit exemple d'un textarea qui prend exactement 50% de la hauteur de la fenêtre en utilisant le CSS3 vhviewport unit qui est
égale à 1% de la hauteur du bloc contenant initial.
Donc, si nous fixons la hauteur du textarea-50vh, il obtiendra la moitié de la hauteur body:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}<textarea></textarea>Il est pretty good supported par les différents navigateurs, à l'exception Opera mini et support partiel dans IE.
Voir aussi [cette question] (http://stackoverflow.com/q/7570438/113848). – legoscia
Vous pouvez essayer les unités de viewport (CSS3): http://www.w3.org/TR/css3-values/#viewport-relative-lengths –