CSS height auto

iamtheone
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017
- 3 mai 2017 à 22:21
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
- 21 mai 2017 à 17:34
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

jordane45
Messages postés
35405
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
356
4 mai 2017 à 00:13
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



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

4 mai 2017 à 13:36
Oui j'ai essayé mais le résultat est le même...
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
Modifié le 4 mai 2017 à 21:41
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 !
0
iamtheone
Messages postés
39
Date d'inscription
lundi 10 avril 2017
Statut
Membre
Dernière intervention
8 mai 2017

5 mai 2017 à 10:27
Ç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.
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
5 mai 2017 à 19:08
sans en avoir la certitude absolut je dirait que c'est pas possible
0
cs_stay
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
3
21 mai 2017 à 17:34
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>
0