Identificarse | Registrarse | FAQ
Anonymous

Problema con el height de iframe

+ Publicar una respuesta

2 mensajes Página 1 de 1


Problema con el height de iframe

por javierv » Mar Feb 28, 2012 11:10 am

Hola,

Vereis, estoy usando iframes y tengo un problema para mostrar el iframe que ocupe el 100% de la pantalla (en height, no en width), teniendo en cuenta que en la parte superior de la misma tengo un header con un height de 90px. Este es mi código:

Código: Seleccionar todo
<div class="page">
    <div class="header">
    </div>
    <div id="lateral" class="lateral">
        <iframe id="iFrameLateral" runat="server" src="Lateral.aspx">
        </iframe>
    </div>
    <div class="main">
    </div>
</div>


y este es mi CSS:

Código: Seleccionar todo
html,body
{
    margin:0;
    padding:0;
    height:100%;
}

iframe
{
    height:100%;
    display:block;
    width:100%;
    border:none;
    bottom:0px;
}

.header
{
    height:90px;
    position:relative;
    clear:both;
    width:100%;
}

.lateral
{
    top:90px;
    overflow-x:hidden;
    overflow-y:auto;
    float:left;
    height:100%;
    bottom:0px;
}

#iFrameLateral
{
    width: 245px;
    left:0;
    height:100%;
}


El problema que tengo, es que al poner top:90px;, se pierden esa cantidad de pixeles por debajo del bottom y que no se ven ni puedo acceder a ellos. No consigo que se vea el 100% de verdad del espacio restante, es decir, desde el top:90px hasta el bottom 0.

¿Alguien sabe cómo podría hacer?
Avatar de Usuario

javierv

  • Mensajes: 1
  • Registrado: Mar Feb 28, 2012 11:04 am

Re: Problema con el height de iframe

por XainPro » Mar Mar 06, 2012 7:37 pm

código CSS
Código: Seleccionar todo
<style type="text/css">
    html,body
    {
        margin:0;
        padding:0;
    }

    iframe
    {
        height:100%;
        display:block;
        width:100%;
        border:none;
    }

    .header
    {
        height:90px;
        position:relative;
        clear:both;
        width:100%;
    }

    .lateral
    {
        overflow-x:hidden;
        overflow-y:auto;
        float:left;
        height:90%;
        bottom:0px;
    }

    #iFrameLateral
    {
        width: 245px;
        left:0;
        height:90%;
    }

</style>
Avatar de Usuario

XainPro

  • Mensajes: 3933
  • Registrado: Vie Feb 17, 2012 8:10 pm


+ Publicar una respuesta

Página 1 de 1