How to get height=100% on <object> Embed

Asked 16/5, 2013 at 9:53 Answered 12/1, 2021 at 11:25

I'm trying to insert the following code but it is not working. I am not able to get 100% height with this. Can anyone help me? Thanks!

<body style="overflow:hidden;">
<TABLE align=left width=234 border="0" cellpadding="0" cellspacing="0">
<TR>
    <TD valign=top align=center WIDTH="234" >
        <object data="EmbedPage.html" type="text/html"  style="width: 230px;height:100%;"></object>
    </TD>
</TR>
</TABLE>
</body>

Dwan answered 16/5, 2013 at 9:53 Comment(2)

Short answer is that the container should also be 100%. – Mouflon 3/9, 2013 at 13:52

I found this and worked for me. #16326945 – Patronymic 14/9, 2018 at 16:8

Use 100vh for height, if you want to span the embed-object over the full-screen.

<body>
   <object data="EmbedPage.html" type="text/html"  style="width:100%;height:100vh;">
   </object>
</body>

Margemargeaux answered 11/3, 2019 at 8:23 Comment(2)

I don't think @Dwan will ever accept a right answer, but this one worked for me. – Fibroid 17/3, 2019 at 10:20

This doesn't seem to work for me. I get two scroll bars, one for the object content and one for the page. – Franklynfrankness 14/6, 2020 at 19:15

try this

<body style="overflow:hidden;height:100%;">
    <object data="EmbedPage.html" type="text/html"  style="float:left;width:230px;height:100%;">
    </object>
</body>

Appleby answered 16/5, 2013 at 10:2 Comment(4)

It doesn't work... I not get 100% height Take a look at screen shot here: clip2net.com/s/54unnx – Dwan 16/5, 2013 at 10:29

can you just put it on jsfiddle.net – Appleby 16/5, 2013 at 10:30

I also need to disable scroll – Dwan 16/5, 2013 at 11:27

which scroll on the body or on the object – Appleby 16/5, 2013 at 11:29

Just remove it from the table.

<BODY style="overflow:hidden; height:100%;">

<object data="http://www.misgeret.co.il/Ebay/Famus/SideMenuFamus.html" type="text/html"  style="float:left;width:230px;height:100%"></object>

</BODY>

http://jsfiddle.net/ma9ic/QtKMa/5/

100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.

You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.

You might need to rethink how you go about this.

This shows you the result using a set height and using iframes

<BODY style="overflow:hidden;height:100%;">

<TABLE align=left width=234 border="1" cellpadding="0" cellspacing="0">
<TR>
    <TD valign=top align=center WIDTH="234" height="1000">
    <iframe src="http://www.misgeret.co.il/Ebay/Famus/SideMenuFamus.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>
    </TD>
</TR>
</TABLE>

</BODY>

http://jsfiddle.net/ma9ic/QtKMa/6/

Hope this helps

Evesham answered 16/5, 2013 at 12:16 Comment(3)

Thank you for your answer, but I still see the scroll, I need no scroll + using the table element because the page consist more elements base on tables, change all the page is very complicate... There is no other way I can do it? – Dwan 16/5, 2013 at 13:16

Thank you, I start thinking it is more complicated than rewrite the code with divs... Anyway, I can't use iframe, I need to use only OBJECT element, How can I disable the scroll on the "div" version? (and still get 100% height "automatically") jsfiddle.net/QtKMa/3 – Dwan 16/5, 2013 at 13:57

overflow-y:hidden; overflow-x:hidden; – Evesham 16/5, 2013 at 13:59

body, html{
    width: 100%;
    height: 100%;
}

<body>
    <table class="flash-container" style="height: 100%; width:100%">
        <tr style="height: 100%; width:100%">
            <td style="height: 100%; width:100%">
                <object width="100%" height="100%">
                    <param name="autoPlay" value="true"></param>
                    <embed allowfullscreen="true" autoPlay="true" flashvars="autoplay=true&play=ture" allownetworking="all" id="pptShow" allowscriptaccess="always" height="100%" src="http://www.weilaijiaoxue.com:9096/upload/2016/4/13/swf_20160413115509559.swf"  type="application/x-shockwave-flash" width="100%"></embed>
                </object>
            </td>
        </tr>
    </table>
</body>

Simper answered 12/6, 2016 at 12:12 Comment(0)

I used the following code and it rendered perfectly in width and height of the browser style="width:100vw;height:100vh;"

Aargau answered 12/1, 2021 at 11:25 Comment(0)

Recommended topics

Hot tags