CSS - Centrage de la page puis faire la page 100% de la hauteur

Je suis en train de le centre d'une page et ensuite de la faire 100% en hauteur.
J'ai un div "content" comme l'élément parent de tous les éléments de la page HTML.
Que dois-je faire ensuite? Je tiens à rester à l'écart de toute CSS-hacks.
C'est actuellement en train de travailler dans IE7, mais pas dans Firefox 3.

EDIT: j'ai ajouté de la hauteur: 100%; #content qu'est ce qu'il fait le travail dans IE. Firefox n'est toujours pas résolu.

Ma feuille de style pour l'instant est:

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    position: relative; 
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 840px;
    height: 100%;
    padding: 0px 5px 5px 5px;
}
Je vois rien de mal dans mes FF 3.0. Pourriez-vous donner plus de détails ?

OriginalL'auteur BuddyJoe | 2008-12-17

  1. 4

    Pour centrer le contenu, le mettre à l'intérieur d'un élément qui a une largeur fixe (important!) et a margin: auto;

    Il n'y a pas de croix-navigateur était de faire de votre div avoir 100% de hauteur, sauf si vous utilisez javascript. Si vous êtes désespérés pour cette fonctionnalité, et sont prêts à l'utilisation de javascript, vous pouvez définir dynamiquement la hauteur de votre contenu en le réglant à la hauteur de la fenêtre. Je n'ai jamais fait ça donc je ne vais pas vous dire combien exactement, mais il devrait être facile à trouver sur google.

    J'ai eu le centrage de la chose en place. Ne peuvent tout simplement pas comprendre la hauteur de la chose maintenant. Je pense que je me penche vers la solution d'activer JavaScript (pensée à ce sujet sur le lecteur à l'œuvre aujourd'hui).

    OriginalL'auteur Logan Serman

  2. 2

    Ahah! Pense que je l'ai eu pour l'instant. Cela fonctionne dans Firefox 3 et IE7. Je vais tester sur d'autres navigateurs plus tard. Je n'ai encore besoin de trouver de l'ajout de certains rembourrage autour de mon contenu.

    Cela nécessite cette hiérarchie sur ma page 

    html 
|__corps 
|__div id=container 
|__div id=content 

        html
    {
        height: 100%;
    }

    body
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container
    {
        position: absolute;
        text-align: center; 
        background-color: #000;
        width: 100%;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;    
    } 

    #content
    {
        text-align: left;
        background-color: #fff;
        margin: 0px auto;
        width: 830px; /* padding thing I'm working on */
        height: 100%;
    }

    OriginalL'auteur BuddyJoe

  3. 0
    body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 90%;
    height: 100%;
    padding: 0px 5px 5px 5px;
}

    De l'essayer. Ce sera le travail. Supprimer le html,body sélecteur, vous n'en avez pas besoin.

    OriginalL'auteur fasih.rana

  4. 0

    Cela fonctionne pour moi sous Firefox 3 & Safari 3. N'ont pas accès à IE. 

    html{
  position:absolute;
  top:0;
  bottom:-1px;
  left:0;
  right:0;
  height:100%;
  text-align:center;
}
body{
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  min-width:30em;
  max-width:50em;
  width:expression("40em");/*IE doesn't support max/min width*/
  padding:0 1em 0 1em;
}

    OriginalL'auteur

  5. 0

    Cela devrait faire mieux.

    Pas de supplément de marquage et/ou de l'identifiant.
    Pas besoin de javascript et/ou de l'expression dans le css.

    Devrait fonctionner sur tous les navigateurs. 

    <style>

html 
{
 background-color:red; 
 margin:0;
 padding:0;
 border:0px;       
}

body{
 background-color:yellow;
 position:absolute;
 left:-400px; /* 50% of content width */
 width:800px; /* your content width */
 margin-left:50%;
 margin-top:0;
 margin-bottom:0;
 top:0;
 bottom:0;
 border:0;
 padding:0
}
</style>

    OriginalL'auteur frenchone

  6. -1

    Pour le centrage de la page, en général, je viens de mettre le contenu de la div dans le centre de la balise, car margin-left/right:auto ne fonctionne vraiment pas dans toutes les versions de IE.

    Pour faire la page de la totalité de la hauteur, vous pouvez truquer un couple de façons. Mon préféré est de créer une image de fond pour le corps de la balise qui est centré horizontalement, mais les carreaux verticalement, de sorte que donnerait la div principale de son arrière-plan blanc. Vous avez sans doute encore un pied de page, donc vous pouvez le positionner avec bottom:0 et qui devrait le garder au fond de vous et vous donner une div du contenu qui semble s'étendre pour l'ensemble de la page.

    Moins de 1 pour le premier paragraphe (éviter d'utiliser le centre de tag), mais le deuxième paragraphe est une bonne idée de laisser le #div du contenu de l'étirer ou de contrat tout ce qu'il veut, mais l'utilisation d'une répétition de l'image de fond sur le corps afin de le faire apparaître à 100% tout le temps. Donc, je vais dire +1 dans l'ensemble.

    OriginalL'auteur AJ.