htmlcssobjectheight

HTML <object> fit height of its content


I'm trying to use a <object type='text/html' data='/forum'></object> to show a phpbb forum inside a content div with width:800px; min-height:525px;.

The div with normal content is resizing so it is getting longer as the content grows. But the object type only holds the height value and makes a scrollbar. If I set no height or height:auto on the object it does not fully expand to the divContent size. If I set the height or min-height fits, but always makes scrollbars.

How can I make the <object> container auto size as the content is getting longer?


Solution

  • As correctly pointed out in comments, you can include your forum inside an iframe.

    <iframe src="forum.html" width="100%" id="yourframe"></iframe>
    

    Then you can get div height inside iframe, as shown in this post. And finally, you can use this height to resize iframe, according to its content.

    $(document).ready(function() {
        $( "#yourframe" ).on('load', function() { 
            var mydiv = $(this).contents().find("div");
            var h = mydiv.height();
            $(this).height(h);
        });
    });