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

html css object height embed

64,649

Solution 1

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>

Solution 2

try this

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

Solution 3

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

Solution 4

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>

View more solutions

64,649

Author by

user2261793

Updated on January 13, 2021

Comments

user2261793 over 3 years

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>

user2261793 almost 11 years

It doesn't work... I not get 100% height Take a look at screen shot here: clip2net.com/s/54unnx
Rohit Agrawal almost 11 years

can you just put it on jsfiddle.net
user2261793 almost 11 years

I also need to disable scroll
Rohit Agrawal almost 11 years

which scroll on the body or on the object
user2261793 almost 11 years

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?
user2261793 almost 11 years

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
Ma9ic almost 11 years

overflow-y:hidden; overflow-x:hidden;
epologee about 5 years

I don't think @user2261793 will ever accept a right answer, but this one worked for me.
B T almost 4 years

This doesn't seem to work for me. I get two scroll bars, one for the object content and one for the page.