css height=“x%”在标记中不起作用< embed>

g6ll5ycj 于 2023-01-27 发布在其他

关注(0)|答案(5)|浏览(124)

我正在使用embed标签来显示一个pdf文件。它工作得很好，除了当我用%定义height时，"height"属性不起作用（"width"做了它应该做的事情）。当我用px代替%时，它起作用了，我试着改变数字，但是没有起作用...有人知道为什么吗？
谢谢大家!
代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<embed id="pdf" src="C:\path\Tysk.pdf" width="60%" height="80%"/>

<style>
#pdf {
}
</style>
</body>
</html>

css

来源：https://stackoverflow.com/questions/50192238/height-x-not-functioning-in-embed-tag

5条答案

按热度按时间

1cklez4t1#

对于<embed>标记，height属性必须以像素为单位显示。不允许使用百分比。
试试这个：

<!DOCTYPE html>
   <html>
     <head>
       <style>
         #pdf {
           height: 800px;
           width: 600px;
         }
       </style>
     </head>
   <body>
     <embed id="pdf" src="C:\path\Tysk.pdf"/>
   </body>
   </html>

Source on MDN

赞(0）回复(0）举报 2023-01-27

jk9hmnmh2#

height=x%依赖于其父元素的高度，因为它是相对于其父元素的。在您的示例中，body是embed元素的父元素。因此，如果您为body元素设置height属性，则它将工作。

赞(0）回复(0）举报 2023-01-27

3pmvbmvn3#

这段代码的工作原理是：

<style>
    embed {
        margin: 0 !important;
        border: 0;
        width: 100%;
        height: 97vh;
    }
</style>
<body>
    <center>
        <embed src="your.pdf#toolbar=0&navpanes=0" type="application/pdf" />
    </center>
</body>

赞(0）回复(0）举报 2023-01-27

cclgggtu4#

根据我之前的回答https://stackoverflow.com/a/74354395/10802527对于一个简单的页面，所有3个行为相同，它们的高度和宽度必须以像素定义或转换为%view，但是浏览器可能会添加自己的框架嵌入边框，因此高度从100 vh减少几个点类似减少100 vw，以避免其他嵌入边框/滚动条异常每个浏览器可能会有所不同，但对于Microsoft Edge，我发现风格

embed, iframe, object { 
 margin: 0!important;
 border: 0;
 width: calc(100vw - 18px)!important;
 min-height: calc(100vh - 18px)!important ;
 }

工作更经常比没有或如下所示更简单width: 99vw; height: 97vh;是一个很好的地方工作

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, embed, iframe, object { margin: 0!important; border: 0; width: 99vw; height: 97vh; }
</style>
</head><body><center>
<div>embed
<embed src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" >
</div>
<div>object
<object data="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" typemustmatch="true" >an</object>
</div>
<div>iframe
<iframe src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" style="border:none;" >an</iframe>
</div>
</center></body></html>

赞(0）回复(0）举报 2023-01-27

i7uq4tfw5#

如果您还没有尝试过这段代码，我认为这段代码会很好地解决您的问题。

<object data="/pdf/mysample.pdf" type="application/pdf" width="100%" height="80%">

    </object>

你好。
请告诉我这次尝试的结果。

赞(0）回复(0）举报 2023-01-27

我来回答

css height=“x%”在标记中不起作用< embed>

5条答案

相关问题

热门标签

最新问答