2

[solved]

So I have a div with a constant height at the top of my page and I want to have an iFrame below it fill up the rest of the page. Google Images and LinkedIn do something very similar

See: http://www.linkedin.com/share?viewLink=&sid=s420444224&url=http%3A%2F%2Flnkd%2Ein%2FcnjYt4&urlhash=ZGYM&pk=nprofile-view-success&pp=1&poster=22330283&uid=5484658853024890880&trk=NUS_UNIU_SHARE-title).

Here is the CSS code I have now:

#header {
  height: 60px;
  float: top;
  position: absolute;
}
#iframe {
  margin-top:61px;
  float: bottom;
  position: absolute;
}

Also, within the HTML, I have made the iFrame 99% width and 90% height.

But this isn't working too well. I only want the iFrame to have scroll bars, but as I start to decrease the window size part of it becomes hidden (barely). As a result, a second set of scroll bars appear. By the way, this is the previous SO question I referred to when trying to tackle the problem: CSS two divs next to each other

Does anyone know how to recreate what LinkedIn does in CSS?

Community
  • 1
  • 1
drewse
  • 115
  • 1
  • 8
  • What do you think `float: top` and `float: bottom` are doing? – thirtydot Jun 10 '11 at 05:10
  • Also, which browsers/versions do you need to support? – thirtydot Jun 10 '11 at 05:25
  • thirtydot, I'm not sure. Honestly, I was trying everything I could do to make it work. An answer in the other SO question I linked to, though, had suggested to put them in. – drewse Jun 10 '11 at 05:26
  • Oh, and I would like to support as many browsers as possible. But currently I'm testing Safari 5 so that matters the most. – drewse Jun 10 '11 at 05:27
  • The only valid values for `float` are: `left | right | none | inherit`. `top` and `bottom` don't work. – thirtydot Jun 10 '11 at 05:36
  • haha thanks! Sorry for the ignorance - I should have suspected when you asked and then went and looked it up. My bad! – drewse Jun 10 '11 at 05:46

1 Answers1

4

I usually would resort to javascript.

Using the jquery library you could do the following in a very simple way.

$().ready(function() {
        $('#iFrame').height($(window).height() - 62);
    });


$(window).resize(function() {
        $('#iFrame').height($(window).height() - 62);
    });
ExCodeCowboy
  • 870
  • 7
  • 10
  • Please mark the answer as accepted and vote for it if it was what you were looking for. I'm sure there are other solutions.. I just like jquery it's simple. – ExCodeCowboy Jun 10 '11 at 05:55
  • I marked the answer as accepted, but I don't have enough reputation to vote you up. When I do, though, I'll try to come back and vote you up. – drewse Jun 10 '11 at 16:41