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, creatin开发者_如何学JAVAg 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>
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>
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%.
加载中,请稍侯......
精彩评论