DIVs Encabezado, Cuerpo y Pie (como si fueran frames)

Scho · #1 (**permalink**) 16/03/2006, 04:26

Saludos!
Tengo una página a la que quisiera ponerle un "encabezado" que estuviese siempre visible en la parte de arriba, lo mismo con el "pie" en la parte de abajo y que fuese la capa del cuerpo la única que tuviese la barra de scroll. Hasta ahora tengo esto:
Parte HTML:

Código:

<div id="encabezado"></div>
<div id="cuerpo">AQUI IRIAN MUCHOS DATOS EN FILAS</div>
<div id="pie"></div>

Parte CSS:

Código:

#encabezado {
	background-color: Navy;
	width: 100%; height: 10px;
}

#cuerpo{
	background-color: #009900;
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
}

#pie {
	background-color: Gray;
	width: 100%; height: 10px;
}

Vale, el problema que me surge con esto es que como le doy a la capa del cuerpo un height del 100% y el encabezado y pie ya tienen 10px cada uno pues es como si se "desbordase" y me aparece el scroll de toda la página y además el de la capa cuerpo.
Me gustaría que la altura de esa capa se adecuase al tamaño de la ventana, por eso le doy un 100%, pero claro, tendría que ser un 100% de la altura de la ventana menos 20px (10 del encabezado + 10 del pie). No sé si me estoy explicando bien, o quizá la cosa no vaya por ahí y se pueda solucionar de otra manera.

Espero que alguien me pueda ayudar. Muchas gracias!

smokecitizen · #2 (**permalink**) 16/03/2006, 10:23

Intenta con esto, funciona incluso en IE, nada más que el scroll te lo visualiza de distinta forma a la que se visualiza en FF.. en IE da más la impresión de que son frames, o sea 3 documentos independientes, ya que el scroll se visualiza solo en el area del content, en FF da más la impresión de lo que es... DIVs footer y header con posición absoluta, y el scroll te lo visualiza a lo largo de todo tu documento (Prueba el código y verás a lo que me refiero)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and footer</title>
<style type="text/css">
 body{
  margin:0;
  padding:header-<length> 0 footer-<length> 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:header-<length>;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:footer-<length>;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header </div>
<div id="footer"> footer </div>
<div id="content"> content </div>

Scho · #3 (**permalink**) 17/03/2006, 05:20

Saludos y gracias por tu respuesta smokecitizen:
La he probado y hace bastante bien lo que buscaba, en IE hace exactamente lo que quería, el FireFox no tanto pero también me vale :)

Sin embargo me ha surgido un problema, cuando todos esos DIVS van dentro de un FORM no me funciona, es decir, tengo algo así:

Código:

<FORM>
<div id="encabezado"></div>
<div id="cuerpo"></div>
<div id="pie"></div>
</FORM>

Sabes como puede solucionarse para que funcione también con eso?

Saludos y gracias!

smokecitizen · #4 (**permalink**) 17/03/2006, 10:49

probé rapidamente el código, tal cual te lo puse y le puse los tags de form y no tuve problemas, no sé si el que estén posicionados absolutamente tanto el header y el footer cause problema, así como el overflow causen problemas, pero creo yo no tienen relación de alguna forma como para que te afecten.

Scho · #5 (**permalink**) 17/03/2006, 11:43

Saludos de nuevo!
Te pego lo que estoy probando, como verás la parte de CSS sólo cambia en que le he puesto 50px de alto a la cabecera y al pie.
La parte del HTML prácticamente sólo cambia en que le he metido varios párrafos al "content" para probar bien el scroll.
Te lo pongo con la etiqueta FORM, pruebalo y después quitaselo y verás como funciona, sin embargo con el FORM no.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type="text/css">
 body{
  margin:0;
  padding:50px 0 50px 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50px;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50px;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</STYLE>
</head>

<body>
<FORM>
<DIV id="header">HEADER</DIV>
<DIV id="content">
<p>1</p><p>2</p><p>3</p>
<p>4</p><p>5</p><p>6</p>
<p>7</p><p>8</p><p>9</p>
<p>10</p><p>11</p><p>12</p>
<p>13</p><p>14</p><p>15</p>
<p>16</p><p>17</p><p>18</p>
<p>19</p><p>20</p>
</DIV>
<DIV id="footer">FOOTER</DIV>
</FORM>
</body>
</html>

He pensado que podía ser cosa de mi navegador, pero es que me falla tanto en IE como en FireFox.

Saludos y gracias!

Jorolo · #6 (**permalink**) 17/03/2006, 12:46

Hola a todos, hola Scho.

en tus selectores hay multiples errores.

Por ejemplo:
* html body{
overflow:hidden;
}

No debe funcionar por que es una declaración falsa.

Esto es cierto, y además funciona:

html body{
overflow:hidden;
}

Pero es inutilmente redundante, queda mejor así:

body{
overflow:hidden;
}

Scho · #7 (**permalink**) 17/03/2006, 14:10

Saludos Jorolo!
Quizá eso también estuviese mal, pero sigue sin funcionar. De todas formas tal como estaba y quitando el <FORM> y </FORM> funciona bien, pero con ellos no hay forma.

Gracias por responder!

Jorolo · #8 (**permalink**) 17/03/2006, 17:24

Hola de nuevo

Cómo ya te dije tu código tiene múltiples fallos, el más grave el doctype a medias.

Prueba este código:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang='es'> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>página con cabecera y pie fijos</title>

<style type="text/css">
body { margin: 0; padding: 0; } 

#cabeza { top: 0; left: 0; }
#Pie { bottom: 0; left: 0; }
#cabeza,
#Pie { position: fixed; background: silver; color: black;
 	 height: 5em;  width:100%;  }

#contenido {  background: olive; color: black;
  		padding:5em 0;  }
</style> </head>
<body>
<form action='post'>
 <div id="cabeza">cabeza</div>
  <div id="contenido">
   <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p>
   <p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p>
   <p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  <hr>
   <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p>
   <p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p>
   <p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
 <div id="Pie">Pie</div>
</form>
 </body> </html>

Espero que te sirva. Si esto no te funciona tienes un problema.

Jorolo · #9 (**permalink**) 17/03/2006, 18:49

Hola a todos.

El ejemplo anterior tiene la altura de la cabeza y en pie en 'em' se redimensiona al aumentar o disminuir el tamaño de la fuente.

Puede hacerse con porcentajes, entonces al redimensionar la ventana se redimensionan el pie y la cabeza.

Esto sería así:

Código HTML:

/* con porcentaje, height: 8%;*/
#cabeza,
#Pie { position: fixed;
 	height: 8%;  width:100%; 
 	background: silver; color: black;}


/* con em, height: 4em; */	 
#cabeza,
#Pie { position: fixed;
 	height: 4em;  width:100%; 
 	background: silver; color: black;}

Scho · #10 (**permalink**) 18/03/2006, 05:16

Saludos de nuevo Jorolo, ante todo gracias por tu paciencia

He corregido lo del doctype y también he probado lo que has puesto, y sí, funciona, pero es que lo que quería hacer es que la cabecera y el pie estuviesen siempre visibles en la parte de arriba y de abajo de la página aunque se hiciese scroll, algo así como si fueran frames, pero con DIVs. Prueba el código que había puesto quitándole lo de <FORM> </FORM> y verás mejor a que me refiero, que creo que no me has entendido del todo / no he conseguido explicarme del todo bien.

Saludos

Jorolo · #11 (**permalink**) 18/03/2006, 06:34

Hola Scho.

Cita:

Iniciado por Jorolo

Si esto no te funciona tienes un problema.

En realidad tienes dos problemas.

1- tienes un problema
2- no eres consciente de que tienes un problema.

El código que mostré funciona estupendamente, el pie y la cabecera estan fijos, para eso es lo de 'position: fixed;'

Y por supuesto funciona tanto con div como con form.

Si tú lo has probado y no te ha funcionado correctamente es que lo has probado mal. ¿Como lo has probado? ¿Has tenido en cuenta la 1ª ley?

Por ejemplo:
http://www.forosdelweb.com/showthrea...68385&posted=1

Mi código a roylugones le funciona de maravilla, a kahlito no...

kahlito tiene un problema.
¿A tí tampoco? tienes un problema.

Scho · #12 (**permalink**) 18/03/2006, 10:18

Saludos Jorolo!
Gracias por tu ayuda y tomo buena nota de tu mensaje, pero también deberías tener en cuenta que muchos de los que entramos aquí tenemos conocimientos bastante escasos de diseño web y CSS y que cosas como el doctype y la codificación se escapan de lo que sabemos en este ámbito.

En mi caso estoy mucho más centrado en desarrollo software, y mis conocimientos en HTML y CSS no dan para mucho más que para posicionar unos cuantos DIVS y darles color y formato al texto que contengan cuando no me queda más remedio que hacer una aplicación web de 0 sin un diseño de partida. Claro que me gustaría saber más del tema, pero no se puede profundizar en todos los frentes y por ahora debo profundizar más en otras cosas que en ésta.

Gracias y saludos

Jorolo · #13 (**permalink**) 18/03/2006, 11:21

Hola Scho.

Por favor, no veas en mis palabras menosprecio. Soy demasiado duro expresandome, pero lo hago sin mala intención y con todo el respeto.

Si algo de mis comentarios te ha servido, me alego.

Si algo no te ha gustado, lo siento, ignoralo.

Atentamente.

Jorolo

Scho · #14 (**permalink**) 18/03/2006, 11:41

Tranquilo, en serio, no me ha sentado mal y sí que me ha servido.

Muchas gracias! Saludos

yercodl · #15 (**permalink**) 10/04/2008, 09:54

Bueno, soy otro buscando solución al tema de fijar cabecera y pie de página siempre visible cuando se tiene en el centro un contenido de muchas lineas con scroll.
Cuando creí que ya lo tenía, y saltaba en un pie de puro júbilo, me encontré con el mismo problema de Scho. Que si está presente la etiqueta <form> todo se jode. Y lamentablemente, las master pages de Asp lo requieren para colocar el famoso control ScriptManager de Microsoft para los controles AJAX.

Si bien Jorolo presenta la solución incluyendo el tag <form>, y digo la solución porque en con los navegadores Opera y Firefox me funciona (otra vez saltaba en un pie), pero con Internet Explorer, en cambio, no funciona. Cabecera y pie desaparecen con el scroll, como si fuesen un párrafo más del contenido. Quizá ése sea el problema de que Jorolo lo considere solución y a Scho no le funcione.

Lamentablemente, el cliente me obliga a realizar la aplicación web para Internet Explorer usando Asp sobre IIS. Ni Linux, ni Apache, ni Firefox son alternativas para mí.

Alguien dio en el clavo ya?

PD: Ojalá algún día los browsers se pongan de acuerdo en no "interpretar" el código, sino "obedecerlo".

Saludos, y seguiré buscando.

Gracias a Jorolo por su interés en cooperar.

yercodl · #16 (**permalink**) 10/04/2008, 14:05

Está aquí:

http://www.cssplay.co.uk/layouts/basics2.html

Funciona en Internet Explorer, Opera, y Firefox.

Agregué las etiquetas <form> envolviendo al <body> y su funcionamiento en Internet Explorer es Idéntico, y algunas cosillas varían en los otros, pero se ajustan fácilmente, habrá que elegir browser y setear así el CSS, salvo que se ponga código para que setee detectando el browser.

Basicamente hay que jugar con:

overflow, padding, z-index, position, height, display.

Se crean tres <div> un header, un content, y un footer.
Se trata de dejar el Content ocupando el 100% del height del <body>, que es el 100% del <html>, que es el 100%.
El header debe quedar position=absolute y pegado al top (=0)
El footer idem, pero pegado al bottom (=0)
Header y footer deben quedar sobre el content, haciendo uso de la propiedad z-index, mayor que la del content.
Como el content está detrás, se le da el padding top y bottom del ancho del header y fotter, para que el contenido no quede detrás, invisible.
Con el overflow=hidden, se hace invisible las scrollbars, que de otro modo hacen comportarse todo mal.

Saludos.

JavierB · #17 (**permalink**) 11/04/2008, 09:28

El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,