min-height 100% ne fonctionne pas sur div interne

J'ai un div appelé "contenu" que je souhaite au moins occuper toute la hauteur d'une fenêtre.min-height 100% ne fonctionne pas sur div interne

Alors ce que je faisais était le suivant:

body 
{ 
    min-height:100%; 
    height:auto !important; 

    /* The following probably aren't relevant but I'll include them just in case */ 
    min-width:600px; 
    color: #fff; 
    font-family:'lucida grande',verdana,helvetica,arial,sans-serif; 
    font-size:90%; 
    margin: 0; 
} 
div#content 
{ 
    min-height:100%; 

    /* The following probably aren't relevant but I'll include them just in case */ 
    clear: both; 
    color: #333; 
    padding: 10px 20px 40px 20px; 
    position:relative; 
    background:url(/img/strawberry.png) right bottom no-repeat; 
}

En utilisant Firebug, je l'ai vérifié qui est en effet en train de prendre toute la page (même quand il n'y a pas de contenu sur la page, comme je le voulais.)

Cependant le problème est, le contenu ne prend pas toute la hauteur de, mais au lieu d'être seulement aussi grand que son contenu interne.

EDIT: Semble fonctionner dans Chrome 7.0.517.41, mais pas dans Firefox 3.6.10 (problème semble se produire dans toutes les versions de Firefox 3.6.x et probablement aussi dans les versions précédentes).

Source

2010-10-22 Razor Storm

J'ai déjà résolu un problème similaire avec

html,body { 
    padding:0; 
    margin:0; 
    height:100%; 
    min-height:100%; 
}

Il semble <html> est parfois pris en compte pour calculer la hauteur.

Source

2010-10-22 07:26:04 MatTheCat

Essayé, pas d'effet sur ff 3.6.10. = [ –

En fait nvm ça a marché, c'était la hauteur: auto! Important; c'était le tuer. Je me demande pourquoi cela n'a pas affecté le chrome. –

La seule chose que je sais est le calcul de la hauteur est très dangereux selon le navigateur ... =/ – MatTheCat

Vous pouvez essayer de définir une hauteur explicite ainsi qu'un min-height:

min-height:100%; 
height:100%;

Je ne sais pas si sûr que ça va marcher, mais quelque chose dit à l'intérieur pourrait.

Source

2010-10-22 07:22:06 Kyle

problème que si est si le contenu de la page ne soit plus d'une fenêtre, l'échelle de coutume div. = [ –

Utilisez la hauteur au lieu de min-hauteur sur le corps. Si le div grossit, il devrait déborder et s'afficher correctement (fonctionne en firefox, chrome, c'est-à-dire pour moi). – kapa

Impressionnant, il l'a résolu. Je ne suis pas sûr de savoir lequel choisir comme bonne réponse puisque vous avez tous les deux contribué à la solution finale: (utilisez html AND body, et utilisez aussi height avec min-height). Voté –

body, html { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
} 
div#content 
{ 
    min-height: 100%; 
    height: 100%; 
}

Cela fonctionne pour vous ...

Source

2010-10-22 07:36:41

Seule chose qui a fonctionné dans mon cas, merci. –

vous n'avez pas besoin d'utiliser min-hauteur sur le corps. la plupart du temps, vous n'avez pas non plus besoin de l'utiliser sur un bloc enfant.

ce petit article explique tout: http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height

Source

2013-09-30 13:54:39 SAiNT