html - 浏览器忽略 css 高度和宽度

Question

我正在尝试制作一个 iframe，它将显示带有顶部 div 的外部站点的完整页面。问题是所有浏览器都忽略了宽度和高度 css。这就是我的 CSS

iframe {
position:fixed;  
width:100%; 
height:100%; 
border:none; 
margin:0; 
padding:0; 
overflow:hidden; 
z-index:999999;}

当您查看 site它忽略了使 iframe 不是全屏的宽度和高度。当我在浏览器中查看源代码时，缺少宽度和高度。有什么办法解决这个问题吗？

Answer 1

您可以为此使用 vh 和 vw 单元。 1vw 是视口(viewport)宽度的 1%，1vh 是视口(viewport)高度的 1%:

iframe {
position:fixed;  
width:100vw; 
height:100vh; 
border:none; 
margin:0; 
padding:0; 
overflow:hidden; 
z-index:999999;
}

顺便说一句，我通过链接查看了该站点。它的 iframe 样式有点破:

iframe {
    position: fixed;
    width: 100;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
}

宽度值没有单位，高度不存在。

以下代码有效:

iframe {
    position: fixed;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
}