<embed>标签height百分比属性失效问题求助

嘿，这个问题我太熟了！咱们来聊聊为什么会这样，以及怎么解决：

核心原因：百分比高度的依赖逻辑 #

CSS里的百分比高度可不是随便就能生效的——它必须依赖父元素有明确的已定义高度。你的<embed>直接放在<body>标签里，但默认情况下，<html>和<body>的高度是“随内容自适应”的，没有一个固定的、可参考的高度值。这就导致<embed>的height:80%找不到计算基准，自然就失效了。

而宽度百分比能正常工作，是因为块级元素的宽度默认会继承父元素的可用视口宽度，天生就有参照，所以百分比宽度没问题。

两种快速解决办法 #

方案一：给父元素（html/body）设置100%高度 #

让<html>和<body>占满整个浏览器视口，这样<embed>的百分比高度就有了参照：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 让html和body占满视口高度，去掉默认边距避免滚动条 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #pdf {
            width: 60%;
            height: 80%;
        }
    </style>
</head>
<body>
    <embed id="pdf" src="C:\path\Tysk.pdf" />
</body>
</html>

方案二：用视口单位vh替代百分比（更简洁） #

vh是CSS3新增的视口单位，1vh等于浏览器视口高度的1%，它不需要依赖父元素的高度，直接参照视口：

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

额外小提示 #

如果你的<embed>是放在某个自定义容器里（比如一个<div>），那要确保这个容器也设置了明确的高度（比如height: 500px或者height: 100%），否则百分比高度还是会失效。另外，给<embed>加上display: block有时候能解决一些浏览器渲染的小问题，不妨试试。

内容的提问来源于stack exchange，提问作者Oskar Våle