Estoy trabajando en pasar de usar tablas para propósitos de diseño a usar divs (sí, sí, el gran debate). Tengo 3 divs, un encabezado, contenido y pie de página. El encabezado y el pie de página son 50px cada uno. ¿Cómo consigo que el pie de página div permanezca en la parte inferior de la página y el contenido div para llenar el espacio intermedio? No quiero codificar el contenido de la altura de los divs porque la resolución de la pantalla puede cambiar.Cómo crear div para llenar todo el espacio entre div de encabezado y pie de página

2008-10-15 Jeremy

En resumen (y esto se produjo desde el enlace CSS Sticky Footer proporcionada por Traingamer), esto es lo que he utilizado: solución

html, body 
{ 
    height: 100%; 
} 

#divHeader 
{ 
    height: 100px; 
} 

#divContent 
{ 
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/ 
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/ 
    vertical-align:bottom; 
} 

#divFooter, #divPush 
{ 
    height: 100px; /*Push must be same height as Footer */ 
} 

<div id="divContent"> 
    <div id="divHeader"> 
     Header 
    </div> 

    Content Text 

    <div id="divPush"></div> 
</div> 
<div id="divFooter"> 
    Footer 
</div>

Fuente

2008-10-16 23:13:03 Jeremy

Aquí está el violín http://jsfiddle.net/KFur6/1/ –

Esto es mejor que el famoso http://matthewjamestaylor.com/blog/perfect-3-column.htm porque el color '' no se muestra mediante. –

gran respuesta. por favor explique por qué usó "vertical-align: bottom"; en divContent? es requerido? – RezaSh

-3

si usted está tratando de maximizar la altura de la div de contenido, en el CSS añadir

altura: 100%;

Fuente

2008-10-15 22:02:27

He descubierto que si usted tiene 3 divs, por ejemplo:

...

y usted hace que el contenido div sea 100% alto, será el tamaño de la altura de la página, pero lo que quiero es que tenga el mismo tamaño que la altura de la página menos los otros div – Jeremy

Para ampliar la respuesta de Mitchel Sellers, proporcione su altura de div de contenido: 100% y asígnele un margen automático.

Para una explicación completa y un ejemplo, vea el CSS Sticky Footer de Ryan Fait.

Dado que conoce el tamaño (alto) de su encabezado, colóquelo dentro del div de contenido (o use márgenes).

La posición absoluta le dará problemas si su contenido es más grande (más alto) que la ventana.

Fuente

2008-10-16 16:58:33 Traingamer

-8

#footer { 
clear: both; 
}

Fuente

2008-10-16 17:25:46

Esto ni siquiera comienza para responder la pregunta. El pie de página no necesita flotar de todos modos. –

Flexbox

Usar diseño flex podemos lograr esto al tiempo que permite para encabezado y pie de página de altura natural. Tanto el encabezado como el pie de página se pegarán a la parte superior e inferior de la ventana gráfica respectivamente (al igual que una aplicación móvil nativa) y el área de contenido principal rellenará el espacio restante, mientras que cualquier desbordamiento vertical se desplazará dentro de esa área.

See JS Fiddle

HTML

<body> 
    <header> 
    ... 
    </header> 
    <main> 
    ... 
    </main> 
    <footer> 
    ... 
    </footer> 
</body>

CSS

html, body { 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
} 

main { 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
    flex: auto; 
}

Fuente

2016-07-28 04:40:17

Parece que esta debería ser la respuesta correcta, creo que la respuesta aceptada está desactualizada. – user3071643

Cómo crear div para llenar todo el espacio entre div de encabezado y pie de página

Respuesta

Flexbox

Cuestiones relacionadas