Código de CSS - Mostrar el contenido de un iframe utilizando un porcentaje de la pantalla

Imágen de perfil

Mostrar el contenido de un iframe utilizando un porcentaje de la pantallagráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 09 de Agosto del 2015 por xve
1.883 visualizaciones desde el 09 de Agosto del 2015. Una media de 28 por semana
Como en la definición de un iframe no se puede poner un valor con porcentaje, aquí se muestra la manera de como hacerlo añadiendo el iframe dentro de un div.
Es muy útil para utilizar en diseños responsive.

Este ejemplo, muestra como utilizar dos iframes que ocupen el 20% y 80% de la pantalla.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 10 de Agosto del 2015 (Creado el 09 de Agosto del 2015)gráfica de visualizaciones de la versión: Versión 1.0
1.884 visualizaciones desde el 09 de Agosto del 2015. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html lang="es">
<head>
    <title>posicionar un iframe con un tanto por ciento</title>
 
    <script>
    </script>
 
    <style>
    body,html {
		border:0;
		margin:0;
		height:100%;
		min-height:100%;
	}
	#div20 {
		height: 20%;
	}
	#div80 {
		height: 80%;
	}
	.iframe-wrapper {
		position: relative;
		overflow: hidden;
	}
	iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	</style>
</head>
 
<body>
 
<div id="div20" class="iframe-wrapper">
	<iframe src="http://www.lawebdelprogramador.com"></iframe>
</div>
 
<div id="div80" class="iframe-wrapper">
	<iframe src="http://www.lawebdelprogramador.com"></iframe>
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
Angel Komander
10 de Agosto del 2015
estrellaestrellaestrellaestrellaestrella
Muy Bueno amigo, nunca esta de mas una Demo del Ejemplo ;)

http://codepen.io/AngelKrak/pen/waOqae
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3238