J'ai une page réactive avec deux sections. Tous les éléments de la section de droite doivent être réactifs, j'ai donc utilisé:

#rightSection * {max-width:100%;height:auto}

Cependant, tout autre style de hauteur est ignoré comme vous le voyez dans l'extrait de code.

Je ne veux pas utiliser !important parce que j'ai beaucoup de styles en ligne avec des codes html donc je préfère ne pas forcer les styles via CSS. Existe-t-il un autre moyen de définir les hauteurs après height:auto?

    #rightSection * {max-width:100%;height:auto}


    .mydiv {
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }
<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!
0
Ali Sheikhpour 16 janv. 2017 à 20:08

2 réponses

Meilleure réponse

Selon votre code, tout ce qui se passe est très bien CSS signifie Cascading Style sheet cela signifie que la dernière règle s'applique et que celle qui est la plus spécifique. Donc, dans votre cas, la première règle a une spécificité plus élevée que la deuxième règle donc height:auto est appliquée.

Consultez le lien pour plus de détails sur la Spécificité .

Ainsi, dans votre code, vous pouvez rendre le second rôle plus spécifique de différentes manières que vous découvrirez à partir du lien ci-dessus. Voici un exemple de ce type.

 #rightSection * {max-width:100%;height:auto}


    #rightSection div {
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }
<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

Modifier: Comme indiqué par @connexo, je suggérerais de ne pas utiliser de Id sélecteurs consultez ce pour plus de détails sur les raisons.

Vous pouvez utiliser des classes css à la place car les classes aident à rendre votre code plus général, par exemple

.outerDiv * {max-width:100%;height:auto}


    .outerDiv .mydiv{
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }
<div class="outerDiv">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is visible now  as the rule is more specific.

J'espère que cela aide :)

2
Community 23 mai 2017 à 12:08
    #rightSection * {max-width:100%;height:auto}


    #rightSection .mydiv {
    	width:534px;
    	height:37px;
    	box-sizing:border-box;
    }
<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!
1
Gokul P P 16 janv. 2017 à 17:11