CSS height auto

Signaler
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017
-
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
-
Bonjour,
Voici mon code :
#nav_container {
            width: 100%;
            height: 0;
            position: fixed;
            top: 42px;
            right: 0;
            background-color: brown;
            overflow: scroll;
            transition: all .2s;
        }
        #nav_icon:hover {
            background-color: purple;
        }
        #nav_icon:hover #nav_container {
            height: auto;
        }

J'aimerais savoir s'il y a moyen de faire la transition pour la valeur de height quand elle passe à auto. Merci ;)

3 réponses

Messages postés
32451
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
347
Bonjour,

A ta question.. la réponse me semble être "oui".

... pour aller plus loin.....
as tu essayé :
-webkit-transition: width 2s; /* Safari */
    transition: width 2s;

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS



.
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017

Oui j'ai essayé mais le résultat est le même...
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
128
et en modifiant aussi le overflow

#nav_icon:hover #nav_container {
overflow:hidden;
height: auto;
 }


rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017

Ça ne change rien... C'est juste le auto qui pose problème, si je met une baleur fixe pour height ça marche très bien.
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
128
sans en avoir la certitude absolut je dirait que c'est pas possible
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Quelle serait l'utilité ? Car si tu as une chaine de caractère dans ton tag#nav_icon. Cela fonctionne !

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
    height: auto;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>une chaine</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>