web-dev-qa-db-fra.com

Pourquoi la hauteur minimale ne fonctionne-t-elle pas?

Voici donc le scoop.

J'ai un dégradé appliqué à l'arrière-plan de l'élément de corps. Ensuite, j'ai un conteneur (juste après le corps) auquel une image de fond .png est appliquée. Le dégradé s'étend toujours jusqu'à au moins 100% de la hauteur de la fenêtre, mais pas le conteneur (# body2).

Des suggestions pour expliquer pourquoi cela ne fonctionne pas? Vous pouvez consulter le code HTML sur ma page Web ici: http://www.savedeth.com/parlours/

htmlbackground-imagecss
34
Dave

Spécifiez height: 100% sur les html, body et #body2 éléments (ligne 1358).

html, body, #body2
{
    height: 100%;
    min-height: 100%;
}

Non testé en IE 6, fonctionne en 7 cependant.

30
wsanville

Utiliser vh au lieu de% a fonctionné pour moi sans avoir à utiliser d'astuces supplémentaires.

Voici ce que j'ai:

html, body, .wrapper {
    min-height: 100vh;
}

Où .wrapper est la classe que vous appliquez à votre conteneur/wrapper ou corps de contenu principal que vous souhaitez étirer sur toute la longueur de la hauteur de l'écran.

Cela fonctionnera comme vous vous en doutez lorsque le contenu dans le wrapper est inférieur ou supérieur à la hauteur de l'écran.

Cela devrait fonctionner dans la plupart des navigateurs .

17
Neceros

Vous avez votre hauteur minimale définie à 100%, qui ne sera aussi grande que tous les éléments qui remplissent l'espace. Exprimez-vous min-hauteur en termes de pixels. Notez également qu'IE6- nécessite son propre ensemble de règles. Voir http://davidwalsh.name/cross-browser-css-min-height pour plus de détails.

3
Michael Copeland

position: absolute; fonctionne dans la plupart des cas

1
harris