All geek questions in one place

The height attribute does not work as expected for the html <object> tag

I am new to HTML and learning it from w3schools. I am looking at an object tag and trying to display a PDF in a browser. I can not understand why the height attribute does not work below the code

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>try here</title> </head> <body> <object data="redBus_Ticket_25718916.pdf" type="application/pdf" height="100%" width="100%">sample</object> </body> </html>

I expect the whole page to be a PDF document. but i see

enter image description here

Can someone tell me the reason for this behavior?

I wonder when I delete the definition, it works as expected. I don’t know how they are connected. Please help me in understanding the behavior.

+4
source share
2 answers

In CSS or everywhere, also set heights for html and body,

 html, body{ height: 100%; min-height: 100%; }

I think the problem is that your content is small, so the document itself does not take up much space, and therefore 100% of the document does not appear on the entire page.

Without setting the minimum height and height for html and body,

JSFIDDLE 1

After setting min-height and height for html, body,

JSFIDDLE 2

+8
source 

 <script> $('object').attr({'width':$( window ).width()}) $('object').attr({'height':$( window ).height()}); </script> 
  <object data="index.html" type="text/html"><p>This is the fallback code!</p></object>
0
source

Source: https://habr.com/ru/post/1497650/

More articles:


All Articles