CSS - Centrar una página y luego hacer que la página tenga una altura del 100%

Question

Estoy intentando centrar una página y luego hacerla del 100% de altura. Tengo un elemento llamado "contenido" como elemento principal de todos los elementos en la página HTML. ¿Qué debo hacer después? Me gustaría alejarme de cualquier CSS-hacks. Esto está trabajando actualmente en IE7, pero no en Firefox 3.

EDIT: He añadido la altura: 100%; a # contenido que es lo que lo hizo funcionar en IE. Firefox aún no está resuelto.

Mi hoja de estilo hasta ahora es:

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; 
} 

Answer 1

Para centrar la página, que normalmente sólo hay que poner el div contenido en la etiqueta del centro, ya que el margen izquierda/derecha: auto realmente no funciona en todas las versiones de IE.

Para hacer que la página tenga toda la altura, puede fingirlo de varias maneras. Mi favorito es crear una imagen de fondo para la etiqueta del cuerpo que está centrada horizontalmente pero con mosaicos verticales, por lo que daría al div principal su fondo blanco. Sin embargo, es probable que todavía tengas un pie de página, por lo que puedes colocarlo con bottom: 0 y eso debería mantenerlo en la parte inferior y darte un div de contenido que parece extenderse para toda la página.

Answer 2

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; 
} 

Pruebe esto. Esto funcionará Retire el html, selector de cuerpo, no lo necesita.

Answer 3

Para centrar el contenido, lo puso dentro de un elemento que tiene un ancho fijo (¡importante!) Y tiene margin: auto;

No hay multi-navegador fue a hacer su div tiene altura de 100% a menos que utilice JavaScript. Si está desesperado por esta funcionalidad y está dispuesto a usar javascript, puede establecer dinámicamente el alto de su contenido al configurarlo a la altura de la ventana. Nunca he hecho esto, así que no te diré exactamente, pero debería ser fácil de encontrar buscando en Google.

Answer 4

Ahah! Creo que lo tengo por ahora. Esto funciona en Firefox 3 e IE7. Voy a probar en otros navegadores más tarde. Todavía necesito descubrir agregando algo de relleno alrededor de mi contenido.

Esto requiere esta jerarquía en mi página

 
html 
|__body 
    |__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%; 
    } 

Answer 5

Esto funciona para mí en Firefox 3 & Safari 3. No tienen acceso a la 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; 
} 

Answer 6

Esto debería hacerlo mejor.
Sin marcado adicional y/o id. No es necesario javascript y/o expresión en css.
Debería funcionar bien en todos los navegadores.

<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>