I am attempting to place an HTML object on a page but I’m having issues with the height.
The object varies in height depending on the content, which updates constantly as it is a list of the latest posts on our forum.
I have set the height as 100% like so:
<object scroll="no" style="width: 200px; height: 100%;" data="http://ivegotkids.com/community/user/index.php/latest-discussions"> </object>
But this is giving me a huge gap at the bottom of the object because it’s giving me 100% of the screen size, not the actual content.
How do I set the height to stop at the bottom of the content and not at the bottom of the screen.
Have you tried leaving out the height completely?
Yes, when I do that the frame sets itself a default size which is only a fraction of the size that’s needed and I end up with a scroll bar to see the rest of it… I need it to be 100% but it should be 100% of the page size not 100% of the screen size.
On which browser you saw this?
This is really confusing, height: 100% should stretch it according to content. Can you provide some link so that we can see it live?
No, it’s based on the element’s container, not its content.
Perhaps JS is needed for this. It would detect the content height and set the height on the object accordingly.
It is my experience that object will size itself to its content if possible. Be sure to use the “type” attribute, e.g. type=“text/html”.