CSS: ¿Es posible obtener un div que sea 100% alto, menos un margen superior e inferior?

puedo conseguir un div altura de 100%, así:CSS: ¿Es posible obtener un div que sea 100% alto, menos un margen superior e inferior?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>T5</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 
    </link> 

    <style type="text/css"> 
     * { padding: 0; margin: 0; } 
     html, body { height: 100%; } 
     body { 
     font-family: "lucida sans", verdana, arial, helvetica, sans-serif; 
     font-size: 75%; 
     } 
     h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;} 
     p { padding: 0 10px 1em; } 
     #container { 
     min-height: 100%; 
     background-color: #DDD; 
     border-left: 2px solid #666; 
     border-right: 2px solid #666; 
     width: 280px; 
     margin: 0 auto; 
     } 
     * html #container { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <h1>100% Height Div</h1> 
     <p>Lorem ipsum ...</p> 
    </div> 
    </body> 
</html>

Se ve así:

alt text http://i41.tinypic.com/1j1do8.jpg

Cuando digo "altura de 100%" - me refiero a que se mantenga la altura completa independientemente de la cantidad de contenido en el div, y sin importar cómo se redimensiona la ventana.

¿Pero es posible obtener un div con una altura de "casi el 100%" de altura? Si quiero márgenes en la parte superior e inferior, ¿puedo hacer eso?

quiero que se vea como esto:

alt text http://i44.tinypic.com/j76kvl.jpg

puedo hacer esto con CSS + Javascript. ¿Puedo hacerlo solo con CSS?

Respuesta:
Sí, es posible con el posicionamiento absoluto.

#container { 
    width: 380px; 
    background-color: #DDD; 
    border: 2px solid #666; 
    position: absolute; 
    top: 20px; /* margin from top */ 
    bottom: 20px; /* margin from bottom */ 
    left: 50%; /* start left side in middle of window */ 
    margin-left: -190px; /* then, reverse indent */ 
    overflow: auto; /* scrollbar as necessary */ 
    }

Resultado:

alt text http://i42.tinypic.com/33vj3nq.jpg

Gracias to keithjgrant for the answer. Vea todo el código en http://jsbin.com/otobi.

Fuente

2010-03-22 Cheeso

¿No se puede hacer esto agregando _padding: 20px 0 20px 0; _ al estilo de id #container? – amelvin

No, porque el relleno y el margen se agregan al alto/ancho. Entonces esto haría una altura de 100% + 40px. – poke

necesita crear un contenedor interno dentro de su contenedor y luego agregar el relleno a ese – stephenmurdoch

Trate posicionamiento absoluto:

#container { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
}

Puede ser peculiar en IE6 (? Lo que no lo es), pero hay un montón de trucos para probar si google alrededor. Algunos incluyen agregar una regla clear: both o envolver su div en posición absoluta dentro de otro div.

Un overflow: auto debe hacer que la barra de desplazamiento se comporte como lo tiene en la foto.

edición: Como alternativa, podría agregar relleno 20 píxeles a un div contenedor, a continuación, establecer su contenedor a height: 100% sin margen, y se debe llenar hasta el relleno de su envoltorio.

Fuente

2010-03-23 15:42:47 keithjgrant

Esto funciona, ¡gracias! – Cheeso

No estoy seguro si me perdí algo, pero ¿por qué no agregar margin-top: 20px; margin-bottom: 20px a #container, si quieres márgenes?

Fuente

2010-03-22 23:00:13

@poke escribió: "No, porque el relleno y el margen se agregan a la altura/ancho. Así que esto tendría una altura de 100% + 40px". –

Dos opciones:

1) Puede utilizar algo así como

#theDiv { 
    top: 16px; 
    bottom: 20px; 
}

pero esto sólo funcionará en los estándares de los navegadores compatibles e IE> = 7, como IE 6 no rendirá su div correctamente cuando usando ambos topybottom.

2) Se puede cambiar el box model fronteras para incluir en la parte superior y la parte inferior dentro de un determinadoheight. Usar algo como

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -khtml-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; /* IE >= 8 */ 
}

para que pueda falsa top y bottom usando

#theDiv { 
    border-top: 16px; 
    border-bottom: 20px; 
}

y poner IE 6 y 7 en el modo de rarezas (por poner algo, por ejemplo un comentario HTML, antes de que el DOCTYPE) para utilizar border-box modelo de caja.

Si quiere soportar IE 6, tendrá que usar # 2.Entonces, en IE 6 solo puedes usar el modo peculiar cuando lo desees (la única otra opción que admite esto en IE 6 es utilizar expresiones CSS, pero requieren mucha CPU, ya que el motor J (ava) Script de IE debe recalcular las anchuras y alturas en cada cambio de tamaño).

Fuente

2010-03-22 23:09:39

¿MS realmente admite '-ms-box-sizing'? Sé que '-ms-box-radius' ni siquiera funciona en IE8. –

@TheEl: De acuerdo con la página enlazada (http://www.quirksmode.org/css/box.html), sí, y de acuerdo con este PDF (estúpidamente diseñado) http://download.microsoft.com/download/ F/F/E/FFEB6B00-64B9-450F-93B3-2781D9F36210/BoxSizing-DeveloperSeriesInformationPage.pdf, IE 8 es compatible con 'box-sizing' y' -ms-box-sizing'. –

No es exactamente como CSS, pero podría simplemente agregar una etiqueta BR fuera del contenedor en la parte superior e inferior y ajustar su margen 100% mínimo para un 90-95%.

Fuente

2010-03-22 23:13:55 MaxGeek

derecha. eso funciona pero no reacciona bien al redimensionamiento. – Cheeso

Se puede usar un segundo div interior con un relleno para darse cuenta de la real relleno "exterior":

<div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;"> 
<div style="padding: 20px 0px;"> 
    Content here 
</div> 
</div>

Alternativamente, si no se visualiza ninguna otra cosa, también se puede utilizar el body para el exterior construcción.

edición: En realidad, usted tendrá que usar min-height para el div exterior, para mantener el fondo en funcionamiento cuando la página es superior al 100% del tamaño de la pantalla. Esto, por ejemplo, funciona bien:

<?xml version="1.0" encoding="utf-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
<title>Test</title> 
<style type="text/css"> 
    html 
    { height: 100%; padding: 0; margin: 0; background: #FFF; } 
    body 
    { min-height: 100%; margin: auto; width: 500px; 
    background: #CCC; border: solid #999; border-width: 0 2px; } 
    div#main 
    { padding: 20px 15px; } 
</style> 
</head> 

<body> 
<div id="main"> 
<h1>100% Height Div</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec 
    pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
    rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo 
    ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
    dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus 
    varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel 
    augue.</p> 
</div> 
</body> 
</html>

Fuente

2010-03-22 23:14:35 poke

¿Funciona esto en IE6? De todos modos, ¿@Cheeso quiere soportar IE6? –

Iirc, IE6 no admite 'min-height', pero dudo que haya otro método que lo haga funcionar (sin usar javascript, por supuesto). Sin embargo, todos los navegadores posteriores sí lo admiten. – poke

Intenté esto y no obtengo un margen en el div. – Cheeso

CSS: ¿Es posible obtener un div que sea 100% alto, menos un margen superior e inferior?

Respuesta

Cuestiones relacionadas