height attribute is not working as expected for html

Question

I am new to HTML and learning it from w3schools. I am looking at object tag and trying to display a pdf in a browser. I am unable to understand why the height attribute doesn't work in below 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 am expecting the entire page to be a PDF document. but what I see is,

enter image description here

Can some one tell me reason for such behavior ?

Interestingly when I remove the definition, it works as expected. Don't know how they are related.Please help me in understanding the behavior.

Optimus Prime · Accepted Answer

In CSS or wherever, 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 doesn't take much space, and hence 100% of document doesn't show in the entire page.

Without setting min height and height for html and body,

JSFIDDLE 1

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

JSFIDDLE 2

height attribute is not working as expected for html <object> tag

Tags:

html

simminni

1 Answers

Optimus Prime

Recent Activity

Donate For Us