<iframe> height issue and negative margins

HTML & CSS
1

I’m trying to display an entire page in an iframe which looks exactly how I want it if I statically set the height in pixels. Then I want to hide the footer on that page so I use a negative margin. The problem is that the iframe content is not controlled by myself and changes in height with dynamically generated content. I’ve tried setting height to 100% but this doesn’t seem to work. All this does is show like 200px of the content when the entire page is over 2000px long.

How do I go about showing a static width iframe with a full 100% height with a -100px bottom margin and no scrolling allowed?

Here is my current code:


<iframe src="[redacted]" width="312px" height="100%" scrolling="no" frameborder="no">
  <p>Your browser does not support iframes.</p>
</iframe>
2

are you sure about using iframes. As i know google dose not like them and you might be sandboxed. Make sure i might be wrong. Search in google about iframes.

3

Nonsense. Google itself uses iframes to allow users to embed its maps into other sites.

4

I’m not worried about indexing as it’s an internal use site. I’m more concerned about getting it to actually work. Maybe I should be asking in the CSS forum?

5

That’s probably the best idea - ask for the thread to be moved. I don’t normally use iframes, so I’m not much help here. I believe there are some limitations on styling iframes. I suppose height:auto doesn’t work?

6

Just gave that a try with no success. I’ll try to contact someone to move the thread to the CSS forum.

7

You should try this code:

See example 2. It fixes the height problem. You can add a footer aswel.
You can style your scrollbars as you like.

8

Thanks for your suggestion but what I ended up doing was scrapping iframes altogether. I used PHP with the cURL extension to pull the information I wanted from the site and then used PHP DOM class to structure it with my own HTML and CSS.