As a disclaimer, I’m an actionscript developer, but know enough css and javascript to get by.
What I need to do is create a document with a fixed bottom bar 100 px in height, and the rest of the space is an iframe that loads documents from external domains. The fixed position bottom bar was easy to create, but I do not know how to get the iframe to be the correct size. Obviously saying height:100%-100px; would be nice, but impossible. I have tried adding a blank 100px div, but that just creates a second scroll bar, which is too ugly to be acceptable. Lastly, I have tried resizing the frame onload, but since the documents are external I can’t access the document’s height.
Does anyone have an idea on how this can be done?
While this code won’t be much help since I think a completely different approach is needed, here is what I’m working with so far:
//CSS
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
.push -- blank div
{
height:100px;
}
.bottom-bar
{
height: 100px;
position:fixed;
left:0;
bottom:0;
width:100%;
cursor:none;
z-index:99999;
text-align:center;
}
#content -- iframe
{
border:none;
height:100%;
width:100%;
}
//HTML
<div id="content-container" class="wrapper">
<iframe id="content" src="http://www.msn.com"></iframe>
<div class="push"></div>
</div>
<div id="bar" class="bottom-bar">
</div>
