首先，我可以完全访问 iframe 内容以及父页面。但我在试图找出为什么 iframe 的内容无法确定 CSS 网格项目的完整高度时遇到了挑战。
我发现做的最好的事情就是申请...
iframe {
border: solid 0.125rem pink;
grid-area: iframe;
width: 100%;
height: 100%;
}
虽然这确实使我的 iframe 的全宽达到 100%，但它对高度调整的影响为 0。
<body class="iframeTest">
<div id="wrapper">
<aside id="sidebar">
<div class="container">
<p>fixed height sidebar</p>
</div>
</aside>
<div id="main">
<div class="container">
<div id="section01" class="child">
<h1>Section 01</h1>
<p>sub content</p>
</div>
<div id="section02" class="child">
<h1>Section 02</h1>
<p>sub content</p>
</div>
<div id="section03" class="child">
<h1>Section 03</h1>
<p>sub content</p>
</div>
<div id="section04" class="child">
<h1>Section 04</h1>
<p>sub content</p>
<iframe src="https://..." width="640" height="384" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">Loading…</iframe>
</div>
<div id="section05" class="child">
<h1>Section 05</h1>
<p>sub content</p>
</div>
<div id="section06" class="child">
<h1>Section 06</h1>
<p>sub content</p>
</div>
</div>
</div>
</div>
</body>
body {
&.iframeTest {
font-family: Arial, Helvetica, sans-serif;
background: #444;
color: #ccc;
text-align: center;
#wrapper {
margin: 0 auto;
#sidebar {
width: 25%;
padding: 1.875rem;
position: fixed;
bottom: 0;
top: 0;
left: 0;
border: solid 0.125rem white;
.container {
display: grid;
gap: 0;
grid-template-rows: 1fr 3fr 1fr;
}
}
#main {
margin-left: 23%;
border: solid 0.125rem white;
.container {
display: grid;
gap: 0;
grid-template-rows: minmax(35.938rem, auto);
#section01 {
display: grid;
place-content: center;
padding: 1.5rem;
background-color: rgba(255, 20, 147, 0.5);
}
#section04 {
/* WHAT WOULD BE RECOMMENED HERE TO ALLOW
THE HEIGHT OF THE CHILD IFRAME, TO DETERMINE
THE HEIGHT OF THIS GRID ITEM?
*/
iframe {
border: solid 0.125rem pink;
grid-area: iframe;
width: 100%;
height: 100%;
}
}
}
}
}
}
}
我在 CodePen 上有一个完整的工作示例。
正如您在我的 CodePen 示例中看到的，iframe 高度被切断，第 05 节与其重叠。 2 个负数。
我必须做什么才能让我的 iframe 内容高度确定该区域中 CSS 网格项目的高度（#Section04）？
有什么我可以尝试的吗？
当您使用
height: 100%<div><iframe>