CSS - Pantalla líquida diferencias entre IE y Firefox/Chrome

   
Vista:

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por fangosto fangosto@hotmail.com (4 intervenciones) el 09/03/2013 14:41:33
Hola a todos:

Os pongo un código que he he hecho de una simple pantalla líquida donde quiero que la cabecera y el pie queden dentro de la pantalla. Me funciona perfecto en IE pero se descalabra en Firefox y Chrome.

Os paso el código para ver si alguien me puede decir cómo hacer para que funcione en todos los navegadores.

Gracias de antemano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<DOCTYPE html> <!-- Estandar HTML5 para todos los navegadores que soporten HTML5 -->
 <!-- Para versiones anteriores podría poner las siguientes líneas-->
 <!-- Para que acepte caracteres españoles: ñ y acentos -->
  <!-- ?xml version="1.0" encoding="iso-8859-1"? -->t;!-- esta línea tiene que ser la primera -->
  <!-- !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"  -->
  <!-- html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"  -->
<!------------------------------------------------------------------------------------------------>
 
<head>
<meta charset="iso-8859-1" />  <!-- Para que acepte caracteres españoles: ñ y acentos -->
<style type="text/css">
 
html,body{
margin:0;
height:100%;
}
 
body {
    font-family: Times New Roman;
    font-size: 1em;
	overflow: hidden;
	border: 0.3125em solid red;
	margin:0.5em;
}
 
#contenedor { 
    position:relative;
	border: 0.3125em solid blue;
	padding: 3.125em 0 3.125em 0; /* Dejo padding en la parte de arriba y abajo */
	height:100%; /* Quiero que se ajuste al contenedor menos menos los padding para la cabecera y el pie */
}
 
#cabecera { 
	height: 3.125em; /* Hago coincidir el alto de la cabecera con el padding del contenedor */
	width: 100%;
	position: absolute;
	top:0; /* Pongo la cabecera en el padding superior del contenedor */
	padding: 0.3125em;
	background-color: rgb(213, 219, 225);
}
 
#content { 
	padding: 0.3125em;
	background-color: rgb(255, 255, 136);
	overflow:auto;
	height:100%;
}
 
#Pie { 
	height: 3.125em; /* Hago coincidir el alto del Pie con el padding del contenedor */
	width: 100%;
	position: absolute;
	bottom: 0; /* Pongo el Píe en el padding inferior del contenedor */
	padding: 3.125;
	background-color: rgb(213, 219, 225);
}
div.borra-flotacion {
    clear: both;
}
</style>
</head>
<body>
<div id="contenedor">
  <div id="cabecera">Cabecera</div>
 
  <div id="content">Este es el div de contenido
   <ul>
   <li><font color="red">Borde del Body = Rojo</font></br></li>
   <li><font color="blue">Borde del Contenedor = Azúl</font></br></li>
   </ul></br>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
   línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
  </div>
 
  <div id="Pie">Pie</div>
</div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por xve (349 intervenciones) el 09/03/2013 20:29:11
Hola Fangosto, no se muy bien como quieres hacerlo, pero mira como lo he dejado...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<DOCTYPE html>
<head>
<meta charset="iso-8859-1" />  <!-- Para que acepte caracteres españoles: ñ y acentos -->
<style type="text/css">
 
html,body{
margin:0;
}
 
body {
    font-family: Times New Roman;
    font-size: 1em;
    border: 0.3125em solid red;
    margin:0.5em;
}
 
#cabecera { 
    height: 3.125em; /* Hago coincidir el alto de la cabecera con el padding del contenedor */
    width: 100%;
    position: fixed;
    top:0; /* Pongo la cabecera en el padding superior del contenedor */
    padding: 0.3125em;
    background-color: rgb(213, 219, 225);
}
 
#content { 
    position:relative;
    top:3.125em;
    bottom:3.125em;
    background-color: rgb(255, 255, 136);
    z-index:-1
}
 
#Pie { 
    height: 3.125em; /* Hago coincidir el alto del Pie con el padding del contenedor */
    width: 100%;
    position: fixed;
    bottom: 0; /* Pongo el Píe en el padding inferior del contenedor */
    padding: 3.125;
    background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
 
  <div id="cabecera">Cabecera</div>
 
  <div id="content">Este es el div de contenido
    <ul>
    <li><font color="red">Borde del Body = Rojo</font></br></li>
    <li><font color="blue">Borde del Contenedor = Azúl</font></br></li>
    </ul></br>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
  </div>
 
  <div id="Pie">Pie</div>
 
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por fangosto fangosto@hotmail.com (4 intervenciones) el 10/03/2013 00:48:25
Gracias por ser tan rápido xve.

Salvo error lo único que me has can¡mbiado es el margin del body de 0.5em a 0em, pero eso sigue sin solucionar el problema. Con esa modificación lo que consigues es que el marco del contenedor se ajuste al del body; pero no consigues que el alto del body y el contenedor ecedan del alto de la pantalla, que es lo que yo busco. Tampoco consigues que la cabecera no se superponga a los bordes en FF y Chrome.

Lo que yo quiero lograr es que la cabecera, el contenido y el pié me ocupen toda mi pantalla sin excederse. Si el contenido es excesivo, debe mostrarbarra de scroll.

Esto lo logro para IE9; pero no para FF o Chrome. Es el típico probelma de que el IE suma los bordes a los marcos y el resto de navegadores los considera incluidos. Lo malo es que no sé como hacer para que todos se comporten igual.

No sé si has intentado ver mi código o el tuyo comparándolos en IE9 y FF o Chrome. En IE9 el borde rojo se ajusta a la pantalla independientemente del tamaño de la misma. En FF y Chrome, sobrepasa el alto de la misma ya que el contenido del contenedor lo hace. Por otor lado, la cabecera se ajusta perfectamente al ancho en el IE9 y en los otros dos se superpone a los bordes.

No sé como pegar imágenes en el foro. Si no me he explicado bien subo las imágenes al servidor para que las veas.

Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por xve (349 intervenciones) el 10/03/2013 18:39:18
No ves que hay mas cambios?? has probado el código que te he puesto?

Tal y como te lo he puesto, la cabecera y el pie siempre se visualiza, y el contenido se visualiza en el interior. Este código que te he puesto, funciona en todos los navegadores contando desde IE9

Pruébalo y coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por fangosto fangosto@otmail.com (1 intervención) el 10/03/2013 21:03:55
No había visto todos los cambios. Ya había intentado una soluci´´on parecida, dejando la cabecera y el pié en posición fija y dejar el contenido detrás. Lamentablemente el problema sigue siendo el mismo, no consigo que el contenedor en tú código y el content en el tuyo se ajuste a la totalidad de la pantalla.

Te pongo un ejemplo muy claro que muestra la diferencia entre IE, Chrome y FireFox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<DOCTYPE html>
<head>
<meta charset="iso-8859-1" />  <!-- Para que acepte caracteres españoles: ñ y acentos -->
<style type="text/css">
 
html,body{
margin:0;
}
 
body {
    border: 0.3125em solid red;
    margin:0;
	overflow:scroll;
}
 
#contenedor { 
	border: 0.3125em solid blue;
	height:100%;
}
 
</style>
</head>
<body>
<div id="contenedor">
</div>
</body>
</html>


Si lo miras en IE, los marcos del body (rojo) y contenedor (azúl) se ajustan a la pantalla. En FF y Chrome se sobresalen por la aparte de abjo. Creo que lo que se salen se corresponde con el ancho de los bordes azúl y rojo.

Apropiándome de tu idea, puedo dejar la cabecera y el pié fijos; pero el problema es cómo hacer que el contenedor ocupe el 100% del alto entre cabecera y pié sin extenderse al encontrarse con un contenido que exceda su altura.

Sigo intentándolo. ¿me puedes ayudar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por fangosto fangosto@hotmail.com (4 intervenciones) el 14/03/2013 22:06:41
¡ Ya lo teng para FireFox y Chrome!

Cabecera, Pié y Contenido ya me quedan dentro de la pantalla con scroll sólo en el contenido. El problema viene con IE, que debidio a su forma de contabilizar los márgenes y bordes. Voy a intentar solucionarlo y, salvo que alguien me ayude, no alargaré este post hasta conseguirlo. Entonces pondré la solución.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<DOCTYPE html>
<head>
<meta charset="iso-8859-1" />  <!-- Para que acepte caracteres españoles: ñ y acentos -->
<style type="text/css">
 
html,body{
margin:0;
}
 
body {
    font-family: Times New Roman;
    font-size: 1em;
    border: 0.3125em solid red;
    margin:0;
	overflow:hidden;
}
 
#cabecera { 
    height: 3.125em; /* Hago coincidir el alto de la cabecera con el padding del contenedor */
    width: 100%;
    position: absolute;
    top:0; /* Pongo la cabecera en el padding superior del contenedor */
    padding: 0.3125em;
    background-color: rgb(213, 219, 225);
}
 
#content { 
    position:relative;
    top:5em;
    bottom:5em;
	height:15em;
	padding: 5em 0 15em 0;
    background-color: rgb(255, 255, 136);
    z-index:-1;
		overflow:scroll;
}
 
#Pie { 
    height: 3.125em; /* Hago coincidir el alto del Pie con el padding del contenedor */
    width: 100%;
    position: absolute;
    bottom: 0; /* Pongo el Píe en el padding inferior del contenedor */
    padding: 3.125;
    background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
 
  <div id="cabecera">Cabecera</div>
 
  <div id="content">Este es el div de contenido
    <ul>
    <li><font color="red">Borde del Body = Rojo</font></br></li>
    <li><font color="blue">Borde del Contenedor = Azúl</font></br></li>
    </ul></br>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
    línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>línea<br/>
  </div>
 
  <div id="Pie">Pie</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por xve (349 intervenciones) el 15/03/2013 08:15:47
Hola fangosto, muchas gracias por comentarlo...

Para todo el tema de los margenes y demás diferencias con IE, puedes utilizar el reset.css que se utiliza mucho para ello: http://meyerweb.com/eric/tools/css/reset/
Lo que hace, es poner por igual las anchuras, alturas bordes, etc... para que trabajen igual en cualquier navegador.

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por fangosto (4 intervenciones) el 24/03/2013 22:55:47
¡¡¡ PRUEBA SUPERADA !!!

Adjunto el código para tener cabecera y pié fijos con contenido ajustado a la pantalla. Todo es eléstico y se ajusta (FireFox y Chrome. IE lo dejo para cuando tenga claro todo). El truco ha sido utilizar posiciones absolutas para determinar la posición del pié y la altura del contenido.

El problema es que tenog claras dudas sobre si es la mejor manera de hacerlo. Dejo el código para ver si recibo ayuda (xve...¡te necesito!). Mientras tanto, lo utilizaré en mis diseños.

Gracias a todos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<DOCTYPE html> <!-- Estandar HTML5 para todos los navegadores que soporten HTML5 -->
<head>
<meta charset="iso-8859-1" />  <!-- Para que acepte caracteres españoles: ñ y acentos -->
    <meta name="title" content="Plantilla pantalla elástica" />
    <meta name="description" content="Plantilla pantalla elástica" />
    <meta name="author" content="fangosto.net" />
 
<style type="text/css">
 
		/* ----------------------------------------------------------------------------------------------------------------
     		Quiero que la cabecera y el pié siempre estén en pantalla. El contenido debe estar entre la cabecera y el pié
			y presentar scroll si lo necesita.
			
			Trabajo todo en posición absolute poque si no, no sé como forzar el alto del contenido sin que se salga todo de 
			pantalla.
			
			Medidas habituales:
			1em = 16px por defecto // 1px = 0.0625em // 5px = 0.3125em // 10px = 0.625em
		-------------------------------------------------------------------------------------------------------------------*/	
 
* {margin: 0; padding: 0;}
 
html, body {
	margin: 0;
	overflow: hidden;
	border:0;
}
 
body{
    margin:0;
	padding:0.3125em;
	height:100%; /* Ajusta el Body a la pantalla */
	overflow:hidden;
	border: 0;
	position:relative; /* si no lo pongo, el interior se referirá al body y, en ocasiones, quiero el diseño dentro de un div */
}
 
#cabecera{
	height:2em;
	min-height:2em;
	margin:0 auto;
	border: 0.3125em solid black;
	clear:both;
}
 
#latizdo,#contenedor,#latdcho{ /* Este es el truco principal. Al dejarlos en posición absoluta puedo marcarles el bottom */
	top:2.78125em;     /* 2*Borde_cabecera + ¿ padding_body/2 ? */
	bottom:3.09375em;  /* 2*Borde_Pie + Borde_Contenido + ¿ padding_body/2 ? */
	min-height:5em;
	overflow:auto;
	position:absolute;
}
 
#latizdo { 
	border: 0.3125em solid orange;
     /* margin:0; /* Aparentemente no vale para nada. Se ajusta al padding del body 
	  float:left; */
	width:5em;
	/* left:0.15625em;	 /* Aparentemente no vale para nada. Se ajusta al padding del body  */
}
 
#contenedor { 
	border: 0.3125em solid orange;
	/* Al posicionar en absoluto con left,right,top,bottom no me hace falta ni margin, ni float
      margin:0; 
	  float:left;	*/
	left:5.95625em;	 /* Border_latizdo + espacio 0.3125em + border_contenedor */
	right:5.9562em;  /* Border_latdcho + espacio 0.3125em + border_contenedor */
 
}
#latdcho { 
	border: 0.3125em solid orange;
    /* margin:0; /*aparentemente no vale para nada */
	/*float:right; /* No sé por qué pero si lo pongo se fastidia el asunto */
	width:5em;
	right:0.15625em; /* No se por qué esta medida Body_padding/2 */
}
 
#pie {
	border: 0.3125em solid black;
	clear:both;
    /* margin:0 auto; /*aparentemente no vale para nada */
	overflow:hidden;
	position:absolute;
	height:2em;
	min-height:2em;
	left:0.15625em;
	right:0.15625em;
	bottom:0.46875em;
}
 
#cabecera,#latizdo,#contenedor,#latdcho, #pie {
	-webkit-border-radius: 0.625em;
	-moz-border-radius: 0.625em;
	border-radius: 0.625em;
	font-size:2em;
	text-align:center;
}
 
</style>
</head>
<body>
 <div id="cabecera">Cabecera</div>
 <div id="latizdo">Lateral izquierdo</div>
 <div id="contenedor">
  <script>
   for(var i=0;i<=50;i++){document.write("Línea" + i + "</br>");}
  </script>
 </div><!-- contenedor -->
 <div id="latdcho">Lateral derecho</div>
 <div id="pie">Pié</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Pantalla líquida diferencias entre IE y Firefox/Chrome

Publicado por xve (349 intervenciones) el 25/03/2013 07:36:37
Muchas gracias por comentarlo fangosto!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar