fijo - ¿Cabecera y pie de página adhesivos de CSS y área media totalmente estirada?

menu fijo al hacer scroll bootstrap

Question

Con CSS, ¿cómo puedo simplemente obtener una página con sticky header and footer página sticky header and footer que aparecen para siempre, cada vez que la página se scrolling or not ? Encontré algunas muestras en línea, pero lo que también quiero es que el área de contenido intermedio sea un área del 100% stretched area between header and footer cualquiera que sea el tamaño del navegador.

Quiero decir, la mayoría de los ejemplos que encontré están haciendo que el encabezado y el pie de página sean correctos ... pero these are just floating y covering the Top and Bottom parts of the ''middle'' content area . Eso no es lo que realmente quiero.

Answer 1

Probablemente estés buscando la "posición: fija"; propiedad, y establecer el encabezado en la parte superior: 0; y el pie de página al fondo: 0; También puede considerar algo de relleno en su "área de contenido" para dar cuenta de ese espacio de encabezado y pie de página ...

Desde lo alto de mi cabeza tendrías algo así como:

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

Si está utilizando algún tipo de fondo en su contenedor y desea estirarlo, una altura: 100%; debería hacer...

Aunque nunca he encontrado una buena forma de usar este tipo de diseño ... = /

Answer 2

Puede usar la posición absoluta para los 3 elementos.

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don''t want any window scrollbars and use an inner element for scrolling*/
}

DEMO: http://jsfiddle.net/RkX8B/

Answer 3

Las soluciones presentadas anteriormente funcionan para un diseño muy simple sin bordes, márgenes ni relleno. Muchas, muchas soluciones que encontrará en la Red funcionarán para esto.

Sin embargo, casi todas las soluciones se separan completamente si simplemente agrega bordes, márgenes y / o relleno a cualquiera o a todas sus divisiones.

Flex Boxes (CSS display: flex;) son increíblemente potentes para esto, y funcionan perfectamente con cualquier combinación de borde, margen y relleno.

Pueden dividir el espacio de tu pantalla en tantas Divs como necesites, usando tamaño fijo, tamaño porcentual o "lo que quede" para cada div interna. Estos pueden estar en cualquier orden, por lo que no está limitado a solo encabezados y / o pies de página. También pueden usarse horizontalmente en lugar de verticalmente, y pueden ser los siguientes.

Por lo tanto, podría tener, por ejemplo, un encabezado de tamaño fijo, un pie de página de 20% y un área de cliente "lo que quede" entre ellos que tenga un tamaño dinámico. Dentro de esa área de cliente, a su vez, podría tener, por ejemplo, una barra de menú de porcentaje de ancho en el borde izquierdo del área de cliente, un divisor vertical de ancho fijo al lado y un área de cliente que ocupa "lo que quede" a la derecha de eso.

Aquí hay un violín para demostrar todo esto. El CSS relevante es notablemente simple. CSS Flex Box (display: flex;) Demostración con bordes / margen / acolchado

Por ejemplo, aquí hay dos clases de CSS que crean contenedores que fluirán sus Divs contenidas ya sea horizontal o verticalmente, respectivamente:

.HorFlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent''s inner width */
}
.VertFlexContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent''s inner height */
} 

El Fiddle de arriba realmente lo muestra todo, sin embargo.

Como referencia, vea este excelente artículo de Chris Coyier: Flexbox Tutorial

Espero que esto ayude!