tags:

views:

187

answers:

2

Hi guys, i've no idea how i can set properties for an iframe that's positioned 300px from the top, but should reach ALWAYS the bottom!

So at the moment i've set the height of the iframe to 500px. The height should dynamically change when i resize the browserwindow. The iframe should start 300px from the top and should always reach the bottom.

I'm not much of an css expert. Any idea what i have to do?

    #frame {
 overflow:hidden;
 border:none;
 width:100%;
 height:500px;
 margin-top:300px;
}
A: 

You can use 'margin-bottom' same way, as you use 'margin-top'. Easiest CSS way, but I'm not sure, if this works on every browser.

Thinker
it's not working for me. do i have to set a height in that case? if i only set margin-top and margin-bottom:0 it's not working. the iframe gets a height of like 100px!
Sorry, bottom does not seems to work, when top is used :(I think you need to use javascript
Thinker
+1  A: 
html, body { /* Allow the #wrapper div to stretch 100% in both directions */
    height: 100%;
    width: 100%;
    margin: 0;
}
#wrapper { /* necessary because it for some reason doesn't work with the iframe */
    position: absolute;
    top: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}
#frame {
    width: 100%;
    height: 100%;
    border: 0;
}

<div id="wrapper">
    <iframe id="frame" src="http://www.google.com" />
</div>
Casey Hope
thanks for your solution, now I know, what was wrong with mine :)I checked it, and it works: http://jsbin.com/eruyo/2/edit
Thinker