Max-hauteur, sur la frontière boîte div avec un rembourrage n'est pas définie
Nous utilisons le pourcentage truc sur les rembourrages pour conserver les proportions d'une div lorsque l'utilisateur échelles sa fenêtre. Comme ceci:
.div {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 20%;
}
Maintenant, nous aimerions être en mesure de définir une hauteur maximale de cette div. Parce que la hauteur de la div est déterminé par le rembourrage sur la div nous aurions besoin de la div à la frontière en boîte. So far So good. Lorsque vous essayez d'utiliser un min-height sur le div, cela fonctionne. Le max-hauteur sur ce div, cependant, ne fonctionne pas pour une raison quelconque.
.div {
max-height: 60px;
}
J'ai créé un violon pour vous montrer ce que je veux dire: http://jsfiddle.net/UxuEB/3/.
Testé sur Chrome, FF et IE. Quelqu'un peut-il me dire ce que je fais mal ou pourquoi cela ne fonctionne pas comme prévu?
- Double question. Doctype est le problème-vous avez besoin de l'un. Voir cet article stackoverflow.com/questions/520710/css-max-height-not-working
- Ce type de document est défini. Les deux dans ma page et en coulisse, donc je ne pense pas que ce soit le problème.
Vous devez vous connecter pour publier un commentaire.
La propriété
max-height
fonctionne sur leheight
de l'élément et que vous souhaitez l'utiliser sur leheight
etpadding-bottom
.Je pense que vous êtes confus par le
box-sizing
bien qu'il modifie la hauteur d'élément à l'overal de hauteur, y compris le remplissage en haut et en bas (moi aussi). Mais ce n'est pas le cas comme vous le verrez dans le jsFiddle exemple.Un exemple:
100px
en hauteur.max-height
est fixé à50px
(élément est maintenant50px
en hauteur).padding-bottom
de100px
(plus la hauteur de l'élément). Le rembourrage de100px
est ajouté au total de la hauteur de l'élément rendant150px
.JsFiddle exemple: clicky
Je me rends compte que cette réponse vient incroyablement en retard à la fête, mais j'ai essayé de résoudre ce exactement la même chose aujourd'hui, et cette question est le premier résultat dans Google. J'ai fini par le résoudre avec le code ci-dessous afin j'espère que ça va aider quelqu'un dans le futur.
Tout d'abord, ajoutez un supplément intérieure div:
Et de définir le rembourrage qui, tout en cachant le débordement sur la div extérieure:
De toute évidence, cela suppose que vous êtes bien avec de cacher une partie de l'intérieur de l'élément quand il déborde. Dans mon cas, ce n'était pas un problème parce que l'intérieur de l'élément est juste un vide élément de lien pour rendre la chose cliquables et l'élément extérieur a centré l'image de fond et une bordure ensemble.
Voir violon: http://jsfiddle.net/UxuEB/7/
overflow: hidden;
était ma pièce manquante. Merci!S'étendant à partir de Mike réponse, le même effet peut être obtenu avec un seul élément du DOM & un pseudo-élément, par exemple.
html:
css: