Pantalla líquida diferencias entre IE y Firefox/Chrome
Publicado por fangosto (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.
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"? --><!-- 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
0
