Iframe en 2 partes 20% y 80%

loadgo · #1 (**permalink**) 07/08/2015, 13:53

Buenas, necesito para salvar una web que tengo hecha un codigo que tenga 2 iframes el primero que cargue al 20% de altura el menu y el segundo que cargue al 80% de altura el cuerpo de la web.

Alguien sabe como podria hacerlo, he probado directamente con el iframe y no me funciona supongo que tendria que ser acompañado de css o javascript.

Muchas gracias.

xfxstudios · #2 (**permalink**) 07/08/2015, 18:14

pasa tu archivo principal de html a php y utiliza los include:

Código PHP:

Ver original<?php include('rutadetumenu/menu.html'); ?>

igual para el cuerpo, o carga el menu con un include y el cuerpo en un iframe por ejemplo

Rafael · #3 (**permalink**) 08/08/2015, 02:03

Revisa esto: http://www.forosdelweb.com/f91/hable...munes-1048430/

y no uses iframes.

loadgo · #4 (**permalink**) 08/08/2015, 03:36

Pero como puedo poner lo del 80% y 20% en lo del include, perdonad pero no domino casi nada del tema.

Muchas gracias

xfxstudios · #5 (**permalink**) 08/08/2015, 05:14

asi insertas las secciones en tu pagina principal:

Código PHP:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
 
<body>
<!--area de menu-->
<?php include('menu.php'); ?>
 
<!--area de contenido-->
<?php include('contenido.php'); ?>
</body>
</html>

asi debes tener la pagina que vas a cargar en contenido con el iframe:

Código Javascript:

Ver original<script> 
                    if (window.innerHeight){ 
                        //navegadores basados en mozilla 
                        espacio_iframe = window.innerHeight - 110 
                        }else{ 
                    if (document.body.clientHeight){ 
                        //Navegadores basados en IExplorer, es que no tengo innerheight 
                        espacio_iframe = document.body.clientHeight - 110 
                        }else{ 
                        //otros navegadores 
                        espacio_iframe = 478 
                        } 
                    } 
                    document.write ('<iframe name="texte" frameborder="0" src="vacia.php" width="100%" height="' + espacio_iframe + '">') 
                    document.write ('</iframe>') 
                </script> 
                <!--------fin del script-------------------------------------------------->
                <noscript>
                <iframe id="texte" name="texte" src="vacia.php" width="100%" frameborder="0" scrolling="no"></iframe>
                </noscript>

yo tengo una aplicacion que carga un menu diferente dependiendo de los privilegios que tenga el usuario que ingresa y la tengo conformada de esa manera, de tal manera que si pinchan en el menu, este se carga en el iframe de contenido por ejemplo, juega con los valores

loadgo · #6 (**permalink**) 09/08/2015, 02:49

Perdona es que de php y javascript tengo 0 conocimientos.

Yo tengo un cuerpo.html que es el cuerpo de la web.

Tengo un menu.html que es el menu.

Por lo que entiendo los tendria que guardar con extension php. hasta ahi creo que lo he pillado.

El codigo php que me has puesto supongo que seria el index.php pero tengo alguna duda en que linea de codigo llama al javascript o no hace falta?

El Javascript lo hago en un archivo aparte o justo debajo del php?

El Javascript llama a un archivo vacia.php con que codigo lo he de crear?

Y en que parte del codigo le dijo que el menu ocupara el 20% y el cuerpo el 80% siento ser tan torpe y quitarte tanto tiempo pero como te digo no tengo conocimientos sobre javascript ni php.

Perdona por las molestias y Muchas gracias.

xfxstudios · #7 (**permalink**) 09/08/2015, 10:51

ok debes jugar con los códigos y combinas html, css y php para lograr algunas cositas, por ejemplo:

index.php:

Código PHP:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
/*Indicamos que la pagina tiene una altura del 100%*/
html, body{
    height:100%;
}
/*llevamos los margenes de la pagina a 0*/
body{
    margin:0px;
}
/*Asignamos el espacio que ocupara el div del menu*/
.menu{
    height:20%;
    background-color:#000000;
    color:#FFFFFF;
}
/*Asignamos el espacio que ocupara el iframe del contenido*/
.contenido{
    height:80%;
    background-color:#00437B;
}
</style>
</head>
 
<body>
<!--area de menu-->
<div class="menu">
<?php include('menu.php'); ?>
</div>
 
<!--area de contenido-->
<div class="contenido">
<?php include('contenido.php'); ?>
</div>
</body>
</html>

El codigo css lo puedes cargar desde un archivo externo para limpiar el codigo un poco

el javascript lo vas a colocar en la pagina contenido.php ya que cuando cargues index este se va a ajustar al div que creaste para tal fin y el menu bueno dejalo alli.

recuerda que si tienes el menu en una pagina aparte debes eliminar las etiquetas de apertura como <html><head><body> y cierre de esas para evitar conflictos, solo deja la estructura interna del codigo de tu menu, por ejemplo <ul><li>ITEM</li></ul>

Rafael · #8 (**permalink**) 09/08/2015, 20:44

Hay una opción mucho más sencilla para las alturas, no es 100% compatible pero es muy bueno.

Código HTML:

Ver originaldiv.20 {height:20vh; background-color: #F00;}
div.80 {height:80vh; background-color: #0F0;}

Otra es definir el html y body al 100%

Código HTML:

Ver originalbody, html {height: 100%;}
div.20 {height: 20%;}
div.80 {height: 80%;}