2009-10-14 9 views
0
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     #t2 
     { 
      width: 87px; 
      top: 49px; 
      left: -566px; 
     } 
     #t1 
     { 
      width: 87px; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div style="height: 171px; width: 391px"> 
    <div id="Div2" style="position:absolute; top: 65px; left: 14px;"> 

     sdsdf<br /> 
     asfaesrestret<br /> 
     asf<br /> 
     asdfas<br /> 
     asdfaasdfasfsad<br /> 
     hhb<br /> 
     jh</div> 
    <div id="t1" style="position:absolute; top: 65px; left: 111px;"> 
     yyyyyyyyyyyyy 
    </div> 
    <div id="Div1" 
     style="position: absolute; width: 87px;position:absolute; top: 168px; left: 12px;"> 
    xxxxxxxxxxxxxxx 
    </div> 
    </div> 
    </form> 
</body> 
</html> 

Salut, Im nouveau à css, S'il vous plaît aidez-moi sur la façon d'augmenter la hauteur de manière dynamique sur donner plus de données dans Div2 ?? La hauteur de la div principale doit également être augmentée. J'ai mis la position à l'absolu, je ne suis pas sûr d'y donner wat pour déplacer le div selon l'augmentation des données sur Div2. veuillez suggérer ?? Merci d'avance.comment augmenter la hauteur dynamiquement de 2ème div sur donner plus de données en 1 Div

-Srini

+0

Je l'ai fait quelque chose de similaire ici: http://stackoverflow.com/questions/1335752 – Sampson

Répondre

1

Je vous suggère d'utiliser un emballage div pour vos deux divs et d'utiliser des pourcentages au lieu de valeurs fixes pour la hauteur.

EDIT:

Effectuez les opérations suivantes alors:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     #t2 
     { 
      width: 87px; 
      top: 49px; 
      left: -566px; 
     } 
     #t1 
     { 
      width: 87px; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div style="height: 171px; width: 391px"> 
     <div id="wrapper" style="position:absolute;"> 
     <div id="Div2" style="top: 65px; left: 14px; background: red;"> 

      sdsdf<br /> 
      asfaesrestret<br /> 
      asf<br /> 
      asdfas<br /> 
      asdfaasdfasfsad<br /> 
      hhb<br /> 
      jh</div> 
     <div id="t1" style="position:absolute; top: 65px; left: 111px;"> 
      yyyyyyyyyyyyy 
     </div> 
     <div id="Div1" 
      style="width: 87px;position:relative; top: 0px; left: 12px; background: green;"> 
      xxxxxxxxxxxxxxx 
     </div> 
     </div> 
    </div> 
    </form> 
</body> 
</html> 

Je mets les couleurs de fond aux divs de sorte que vous verrez ce que je veux dire. Essentiellement, j'ai ajouté un div d'emballage avec la position absolue. Les Div1 et Div2 sont maintenant relatifs. La Div1 a un attribut top: 0, pour ne laisser aucun espace avec Div2.

+0

Je veux pour descendre la Div1 si les données sont données plus sur Div2. Il ne devrait pas remplacer le contenu Div1 ... à partir de maintenant son dépassement de la Div1 .. Copiez le code ci-dessus et donner plus de données à l'intérieur de div2, il va remplacer la Div1 .. –

0

Vous pouvez utiliser JavaScript pour modifier les propriétés des éléments de manière dynamique. Par exemple

document.getElementById("Div1").style.width= "900"; 
+0

Je veux descendre la Div1 si les données sont données plus sur Div2. Il ne devrait pas remplacer le contenu Div1 ... à partir de maintenant son dépassement de la Div1 .. Copiez le code ci-dessus et donner plus de données à l'intérieur div2, il va remplacer la Div1 .. –

+0

Donc, fondamentalement, vous voulez changer la position div basée sur div contenu ? – svlada

0

Works Crossbrowser 100 pour remplacer ce que vous voulez être la hauteur par défaut

min-height: 100px; height: auto !important; height: 100px; 
Questions connexes