iframe嵌入简历PDF时高度无法调整增大的问题咨询

故障原因 #

• 你给iframe设置的高度使用了百分比单位500%，百分比高度要生效需要所有父级元素都有明确的高度定义，你当前iframe的父容器属于响应式容器，本身没有设置明确高度，同时iframe外层还被p标签包裹，p标签默认是自适应内容高度，两个原因共同导致你设置的高度参数不生效。

修复方法 #

将iframe的高度单位替换为固定像素值即可，同时可以移除外层多余的p标签避免样式干扰，修改后的对应代码如下：

<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
    <div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
        <iframe width="75%" height="1200px" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true" style="border: none;">
            <p>您的浏览器不支持iframe功能，请点击上方的pdf链接下载查看简历。</p> 
        </iframe>
    </div>
</div>

如果修改后高度仍然不生效，可以给iframe加上!important强制提升样式优先级：

<iframe width="75%" style="height: 1200px !important; border: none;" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">

你可以根据自己简历的实际长度调整1200px的数值到合适大小即可。

内容的提问来源于stack exchange，提问作者Rubén Pérez Sanz