CSS - ne peut pas obtenir min-hauteur de travail

J'essaye de faire une page Web très simple. Il devrait s'agir d'un rectangle vert centré de 1000 pixels, s'étendant du haut vers le bas de la page sur un fond rouge, quel que soit le contenu.CSS - ne peut pas obtenir min-hauteur de travail

Je n'arrive pas à faire fonctionner ça. Si j'utilise min-height (comme ci-dessous), la zone verte ne s'étend pas jusqu'au bas de la page si le contenu est insuffisant. Si je le remplace par height, le contenu déborde de la zone verte s'il y a beaucoup de contenu.

Voici mon HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="stylesheet.css" /> 
    </head> 
    <body> 
     <div id="container"> 
      content here. 
     </div> 
    </body> 
</html>

Voici le CSS:

html { 
    height: 100%; 
} 

body { 
    background-color: #F00; 
    margin: 0; 
    min-height: 100%; 
} 

#container { 
    background-color: #0F0; 
    width: 1000px; 
    margin: 0 auto; 
    height: 100%; 
}

Je sais que cela est faisable avec plus div s, mais il faut vraiment travailler sans changer le code HTML. Comment puis-je resoudre ceci? En passant, je suis sur Safari. Je ne me soucie pas de la compatibilité avec les navigateurs ne respectant pas les normes.

Source

2011-07-23 ryyst

Est-ce que http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin aide? – andyb

Voici un échantillon de travail:

<!doctype html> 
<html> 
<head> 
    <title>Container sample</title> 
    <style> 
     html, body 
     { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      background: red; 
     } 
     #container 
     { 
      background: green; 
      width: 1000px; 
      min-height: 100%; 
      margin: 0 auto 0 auto; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     Container sample 
    </div> 
</body> 
</html>

Pour plus d'informations jeter un oeil à my answer à un question similaire.

Source

2011-07-23 20:15:50 knut

vous pouvez utiliser la propriété position absolute pour votre condition. Il peut vous aider à

#container { 
    background-color: #0F0; 
    width: 1000px; 
    margin: 0 auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:50%; 
    margin-left:-500px; 
}

Source

2011-07-23 09:39:54

Malheureusement, cela empêche la zone verte d'être centrée. – ryyst

ryyst ------ voir maintenant: P –

Donnez à votre #container un position:absolute; avec top et bottom ensemble à 0.

#container { 
    background-color: #0F0; 
    width: 1000px; 
    margin: 0 auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
}

http://jsfiddle.net/jasongennaro/4ZLcD/

Source

2011-07-23 20:06:56

CSS - ne peut pas obtenir min-hauteur de travail

Répondre

Questions connexes