html - 高さ属性が 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.

score 10 · Accepted Answer

CSSでもどこでも、htmlとbodyの高さも設定して、

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

問題は、コンテンツが小さいため、ドキュメント自体があまりスペースをとらず、ドキュメントの 100% がページ全体に表示されないことだと思います。

html と body の最小高さと高さを設定せずに、

JSFIDDLE 1

html、body の min-height と height を設定した後、

JSFIDDLE 2

score 0 · Accepted Answer

<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>

2 に答える 2

Related

Reference