CODEWITHSUNDEEP
iframehtmlwindowsize
Victor Santos
Victor Santos

Reputation: 350

How can I put a div and an iframe occupying 100% of window height?

I would like to replace a frameset page with a page with a div (menu) and an iframe (content).

I'm trying the code below but the iFrame occupies the entire window space, including the menu, creating a scroll bar.

How to make the iFrame cover only the remaining space of the window?

jsfiddle -> http://jsfiddle.net/Q3UV2/

CSS

body {
    background-color:Black;
    margin:0px;
    overflow:auto;
}
#divMenu {
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#ifrContent {
    position:absolute;
    width:100%;
    height:100%;
}

HTML

<body>
    <div id="divMenu">Menu</div>
    <iframe id="ifrContent" frameborder="0" src="http://www.ebay.com/"></iframe>
</body>

Upvotes: 1

Views: 3440

Answers (2)

Victor Santos
Victor Santos

Reputation: 350

CSS

body {
    background-color:Black;
    margin:0px;
    overflow:hidden;
}
#divMenu {
    position:absolute;
    top:0px;
    left:0px;
    height: 100px;
    width:100%;
    background-color:Gray;
}
#divConteudo {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100px;
    background-color:#0ff;
}

HTML

<div id="divMenu">Menu</div>
<div id="divConteudo">
    <iframe id="ifrConteudo" frameborder="0" src="http://www.ebay.com/" width="100%" height="100%" style="background-color:#fff"></iframe>
</div>

Upvotes: 1

Purag
Purag

Reputation: 17061

Put this code into your css:

html, body {
height:100%;
}

Setting a div's height to 100% makes it take up 100% of it's parent div's height, so setting the div's height to 100% doesn't mean anything until you set it's parents height to 100%.

Upvotes: 0

Related Questions