如何使一个元素相对于所有其他元素的大小为 100%？答案

【问题标题】：How do I make an element have a size of 100% relative to all the other elements?如何使一个元素相对于所有其他元素的大小为 100%？
【发布时间】：2021-08-18 15:05:36
【问题描述】：

我的屏幕顶部有一个导航栏，我还希望在它下面有一个 iframe 覆盖屏幕的其余部分。当我执行width: 100%; height: 100% 之类的操作时，我将如何做到这一点，以便 iframe 不会被切断。这是引用主体，因此 iframe 以 100vw 和 100vh 创建。因为导航栏已经覆盖了屏幕的一部分，一些 iframe 被强制在下面。有什么办法可以强制 iframe 在不超过屏幕尺寸且不对其进行硬编码的情况下尽可能大吗？

body {
  margin: 0;
}

#navbar {
    width: 100%;
    height: 10vh;
    background-color: skyblue;
}

iframe {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100%; /* I dont want to hardcode this value */
}

<body>
<div id="navbar">
  <a>navbar</a>
</div>

<iframe src="https://wikipedia.org/wiki/Main_Page"</iframe>
</body>

【问题讨论】：

请在问题中包含您的尝试，而不仅仅是在外部站点上。您可以使用 Stack Snippets 来执行此操作（工具栏中的图标类似于 <>）。
如果你知道导航栏有多高，你可以使用calc（如height: calc(100vh - <height of navbar>);）在你的情况下，更容易，因为#navbar已经在vh中。只需让iframe 拥有height: 90vh。
这能回答你的问题吗？ CSS - Height of 100% minus #px - Header and Footer

标签： html css

【解决方案1】：

您已为 iframe 添加了z-index:-1;。这会强制导航栏下的 iframe。

尝试删除它。

【讨论】：