CODEWITHSUNDEEP
javascriptcss
124697
124697

Reputation: 21893

How do I give 100% height to an iframe that is inside of a frame in a frameset

I have tried css

iframe {
        margin: 0px;
        padding: 0px;
        width: 100%;
         height:100%; 

    }

I also tried javascript

function resize()
{
    document.getElementById('dashIframe').style.height = top.main.clientHeight + 'px';

}

But I can't get the iframe to be 100% height

Upvotes: 0

Views: 841

Answers (1)

AshHeskes
AshHeskes

Reputation: 2324

Your iframe is taking the height of the parent element. If there is nothing else in the frame making it larger then the height of the body is 0. 100% of 0 is 0.

You have two solutions, either make the body and html of your frame 100% like so.

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Or give your iframe absolute positioning, make sure it is not in any other container that has relative or absolute positioning applied. like so..

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

On a side note framesets are no longer supported in HTML5. So I would probably try and find an alternate solution to your frameset. You can achieve the same visual effects just using divs.

Upvotes: 2

Related Questions