Javascript changer la taille de div si vide ou non

Question

Je veux un div toujours avoir la hauteur 59% quand il a du contenu et disparaît lorsqu'il est vide.

expliquer plus dans cette photo:

J'utilise javascript pour faire, et essayer de nombreuses façons, mais rien ne se passe. Voici mon code:

<%--Html--%> 

    <div id="main"> 
      <div id="content1"> 
      </div> 
      <div id="down"> 
      </div> 
     </div> 

<%--CSS: in css file--%> 
    #main 
    {width:84%;height:78%;position:absolute;left:8%; top:14%; } 
    #content1 
    {width: 100%;height: 59%;overflow: auto;} 
    #down 
    {margin-top:0.5%;width: 100%;height: 40%;} 

<script type="text/javascript"> 
    if ($("#content1").length < 1) { 
        $("#content1").height = 0%; 
        $("#down").height = 100%; 
        } 
    else { 
    $("#content1").height = 59%; 
     $("#down").height =40%; 
    } 
</script> 

Answer 1

il y a quelques questions ... je remarque d'abord votre javascript doit être appelé après que le document a terminé son chargement - pour ce faire, vous voulez le placer dans un

$(document).ready(function(){ ... }); 

seconde j'utiliserais jquery pour faire des affectations comme avec la fonction .css ({...}).

aussi est certainement utile de mentionner que la déclaration conditionnelle

if ($("#content1").length < 1) 

vérifie le nombre d'éléments « # content1 » contient, si vous voulez vérifier la longueur de la chaîne de HTML dans cet élément vous utiliserait .html().

tout mettre ensemble, c'est ce que le résultat final devrait ressembler à

$(document).ready(function(){ 
     if ($("#content1").length < 1) { 
       $("#content1").css('height', '0%'); 
       $("#down").css('height', '100%'); 
     } 
     else { 
       $("#content1").css('height', '59%'); 
       $("#down").css('height', '40%'); 
     } 
    }); 

en utilisant la fonction de css jquery cette façon remplacera les styles existants avec ceux fixés. maintenant ce script ne s'appelé une fois après le DOM est initialement chargé pour la première fois - si tant que le contenu de votre page n'est pas tout changer devrait fonctionner correctement

profiter

Answer 2

Soyez conscient que la hauteur CSS les pourcentages sont calculés par rapport à la hauteur de l'élément parent. Si l'élément parent (et TOUS les parents) n'a pas explicite hauteur déclarée il n'y a rien à calculer et la hauteur en pourcentage ne fonctionne pas.