我在内容部分有一个 iframe。
如何让它占据整个 div 完全覆盖该区域？
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<base target="_top">
<style>
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
iframe{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<iframe scrolling="no" class="second-row" src="https://drive.google.com/open?id=1JIJRpPOyPr7beicfU1oXpjzERQWDk29Esz5zLRJfzWs" frameborder="0"></iframe>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>此 iframe 不占据内容的完整覆盖区域。 IFrame(内联框架)是嵌入网站上另一个 HTML 文档中的 HTML 文档。 IFrame HTML 元素通常用于将其他来源的内容(例如广告)插入到网页中。
最佳答案
添加 position: relative; 到 .box .row.content。和 position: absolute; 到 iframe。
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
position: relative; /*Added */
}
.box .row.footer {
flex: 0 1 40px;
}
iframe {
width: 100%;
height: 100%;
position: absolute; /* Added */
}<div class="box">
<div class="row header">
<p><b>header</b> <br />
<br />
(sized to content)</p>
</div>
<div class="row content">
<iframe scrolling="no" class="second-row" src="https://drive.google.com/open?id=1JIJRpPOyPr7beicfU1oXpjzERQWDk29Esz5zLRJfzWs" frameborder="0"></iframe>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>关于javascript - 使中间 iframe 占据整个 div 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49187405/