jquery: auto-size absolu positionné enfant div

Question

J'ai le balisage suivant en utilisant 2 divs. le div #child a défini la position: absolute;

+------------------------------+ 
| +----------+    | 
| | #child |    | 
| +----------+    | 
|        | 
|        | 
|        | 
+------------------------------+ 

je veux changer la taille de l'enfant par code afin qu'il toujours auto-tailles à son récipient comme celui-ci:

+------------------------------+ 
| +----------+    | 
| | #child |    | 
| |   |    | 
| |   |    | 
| |   |    | 
| +----------+    | 
+------------------------------+ 

est-il une fonction par défaut pour elle? thx

Answer 1

essayer;

$('#child').height($('#child').parent().height()); 

Ceci suppose que vous n'avez aucun remplissage et bordures sur votre div externe. Si vous le faites, vous devrez les enlever de la hauteur dans certains navigateurs pour vous assurer que cela correspond.

Answer 2

<div id="parent"> 
    <div id="child"></div> 
</div> 

avec:

#parent { position: relative; background: red; height: 500px; width: 700px; } 
#child { position: absolute; background: yellow; height: 80%; top: 10%; bottom: 10; left: 100px; width: 300px; } 

Note: la hauteur de l'enfant est relative (80%) à la hauteur du parent donc peu importe ce que vous définissez la hauteur du parent ou de redimensionner dynamiquement à, ça va changer la hauteur de l'enfant mais le parent doit avoir une hauteur explicitement définie (même si c'est 100%) ou ça ne marchera pas.

Answer 3

Essayez quelque chose comme ça (approximation grossière, adapter à vos besoins)

$('#child').css('left', '20%').css('top','10%').css('height','80%').css('width', '30%'); 

Answer 4

Puisque vous marqués avec jQuery Je vais vous donner une solution de style jQuery aussi:

$("#child").height($("#parent").height()*0.8);