¿Cómo hacer este diseño de encabezado/contenido/pie de página usando CSS?

______________________ 
|  Header  | 
|______________________| 
|      | 
|      | 
|  Content  | 
|      | 
|      | 
|______________________| 
|  Footer  | 
|______________________|

Me gustaría hacer esta interfaz de usuario, y cada uno es un div. La altura del encabezado es 30px. Y el pie de página es 30px. Pero no sé la altura del contenido. Necesito usar el marco de usuario para calcular.¿Cómo hacer este diseño de encabezado/contenido/pie de página usando CSS?

La altura total debe ser del 100%.

¿Puedo hacerlo en CSS puro?

Fuente

2011-08-19 DNB5brims

¿Pueden los downvoters explicar sus votos a favor? No sé CSS, así que esto parece una pregunta perfectamente cromática para mí. –

Estoy seguro de que los downvotes se deben a la falta de esfuerzo percibido por parte de OP, que es totalmente legítimo. –

Es una pregunta perfectamente válida. Esto sigue siendo un dolor y no es intuitivo con CSS. – Glenn

Usando FlexBox, esto es fácil de lograr.

Establezca la envoltura que contiene sus 3 compartimentos en display: flex; y déle una altura de 100% o . La altura de la envoltura llenará toda la altura y display: flex; hará que todos los elementos secundarios de esta envoltura que tenga las propiedades de flexión adecuadas (por ejemplo flex:1;) se controlen con la flexbox-magic.

Ejemplo de marcado:

<div class="wrapper"> 
    <header>I'm a 30px tall header</header> 
    <main>I'm the main-content filling the void!</main> 
    <footer>I'm a 30px tall footer</footer> 
</div>

y CSS para acompañarlo:

.wrapper { 
    height: 100vh; 
    display: flex; 

    /* Direction of the items, can be row or column */ 
    flex-direction: column; 
} 

header, 
footer { 
    height: 30px; 
} 

main { 
    flex: 1; 
}

Así es que el código de vivir en Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left

Puede ver más FlexBox-magia aquí: http://philipwalton.github.io/solved-by-flexbox/

O encuentre una documentación bien hecha que Re: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

- [continuación vieja respuesta] -

Aquí van: http://jsfiddle.net/pKvxN/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Layout</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    header { 
    height: 30px; 
    background: green; 
    } 
    footer { 
    height: 30px; 
    background: red; 
    } 
</style> 
</head> 
<body> 
    <header> 
    <h1>I am a header</h1> 
    </header> 
    <article> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor. 
    </p> 
    </article> 
    <footer> 
    <h4>I am a footer</h4> 
    </footer> 
</body> 
</html>

que funciona en todos los navegadores modernos (FF4 +, Chrome, Safari, IE8 e IE9 +)

Fuente

2011-08-19 14:43:26

Pero, ¿cómo puedo hacer para que el pie de página se adhiera a la parte inferior de la pantalla? – DNB5brims

Pero cuando el artículo se vuelve muy largo, el pie de página sale de la pantalla, y necesito desplazarme hacia abajo ... Me gustaría poner el pie en su lugar. – DNB5brims

http://jsfiddle.net/UpHtc/ | http://jsfiddle.net/SSeQk/ algo así –

Aquí es cómo a eso:

La cabecera y el pie son 30px de altura.

El pie de página está pegado en la parte inferior de la página.

HTML:

<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div>

CSS:

#header { 
    height: 30px; 
} 
#footer { 
    height: 30px; 
    position: absolute; 
    bottom: 0; 
} 
body { 
    height: 100%; 
    margin-bottom: 30px; 
}

probarlo en jsFiddle: http://jsfiddle.net/Usbuw/

Fuente

2011-08-19 14:38:21 arnaud576875

+1 buen trabajo :) agradable y fácil – walialu

+10

Esto no funciona si el contenido excede la altura de la pantalla. Luego, el pie de página se superpondrá con el contenido y el contenido continuará después del pie de página. – acme

Prueba este

CSS

.header{ 
    height:30px; 
} 
.Content{ 
    height: 100%; 
    overflow: auto; 
    padding-top: 10px; 
    padding-bottom: 40px; 
} 
.Footer{ 
    position: relative; 
    margin-top: -30px; /* negative value of footer height */ 
    height: 30px; 
    clear:both; 
}

HTML

<body> 
    <div class="Header">Header</div> 
    <div class="Content">Content</div> 
    <div class="Footer">Footer</div> 
    </body>

Fuente

2011-08-19 14:56:16 atrueresistance

No funciona. "contenido" nunca tendrá altura 100% de esta manera. –

Mire la fecha de respuesta. Los navegadores han cambiado desde 2011. – atrueresistance

Sí, no es tu culpa, pero es mejor que se lo advierta a los que usarán el código, como yo. :) –

Después de tocar el violín alrededor de un tiempo me encontré una solución que funciona en> Internet Explorer 7, Chrome, Firefox:

http://jsfiddle.net/xfXaw/

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height:100%; 
} 

#wrap { 
    min-height:100%; 

} 

#header { 
    background: red; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
    height:50px; 
    margin-top:-50px; 
    background: green; 
}

HTML:

<div id="wrap"> 
    <div id="header">header</div> 
    <div id="content">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. 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. </div> 
</div> 
<div id="footer">footer</div>

Fuente

2013-10-18 13:54:00 acme

Pruebe esto

<!DOCTYPE html> 

<html> 

<head> 

<title>Sticky Header and Footer</title> 

<style type="text/css"> 

/* Reset body padding and margins */ 

body { 
    margin:0; 

    padding:0; 
} 

/* Make Header Sticky */ 

#header_container { 

    background:#eee; 

    border:1px solid #666; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 

    top:0; 
} 

#header { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 
} 

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/ 

#container { 

    margin:0 auto; 

    overflow:auto; 

    padding:80px 0; 

    width:940px; 

} 

#content { 

} 

/* Make Footer Sticky */ 

#footer_container { 

    background:#eee; 

    border:1px solid #666; 

    bottom:0; 

    height:60px; 

    left:0; 

    position:fixed; 

    width:100%; 
} 

#footer { 

    line-height:60px; 

    margin:0 auto; 

    width:940px; 

    text-align:center; 

} 

</style> 

</head> 

<body> 

<!-- BEGIN: Sticky Header --> 
<div id="header_container"> 

    <div id="header"> 
     Header Content 
    </div> 

</div> 
<!-- END: Sticky Header --> 

<!-- BEGIN: Page Content --> 
<div id="container"> 

    <div id="content"> 

      content 
     <br /><br /> 
      blah blah blah.. 
     ... 
    </div> 

</div> 
<!-- END: Page Content --> 

<!-- BEGIN: Sticky Footer --> 
<div id="footer_container"> 

    <div id="footer"> 

     Footer Content 

    </div> 

</div> 

<!-- END: Sticky Footer --> 

</body> 

</html>

Fuente

2013-10-24 05:43:48 Anand

¿Cómo hacer este diseño de encabezado/contenido/pie de página usando CSS?

Respuesta

Cuestiones relacionadas