对于html <object>标记</object>，height属性未按预期工作

时间：2013-08-18 09:16:12

标签： html html5

我是HTML新手并从w3schools学习它。我正在查看对象标记并尝试在浏览器中显示pdf。我无法理解为什么height属性在下面的代码中不起作用

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

我希望整个页面都是PDF文档。但我所看到的是，

enter image description here

有人可以告诉我这种行为的原因吗？

有趣的是，当我删除定义时，它按预期工作。不知道他们是如何相关的。请帮助我理解这种行为。

2 个答案:

答案 0 :(得分：9)

在CSS或其他地方，也设置html和body的高度，

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

我认为问题在于您的内容很小，因此文档本身不占用太多空间，因此100％的文档不会显示在整个页面中。

不设置html和body的最小高度和高度，

<强> JSFIDDLE 1

为html，body设置min-height和height后，

<强> JSFIDDLE 2

答案 1 :(得分：0)

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

相关问题
最新问题