使中间 iframe 占据整个 div 宽度答案

【问题标题】：Make middle iframe to occupy full div width使中间 iframe 占据整个 div 宽度
【发布时间】：2018-08-17 15:36:13
【问题描述】：

我在内容部分有一个 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 元素通常用于将来自其他来源的内容（例如广告）插入到网页中。

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

将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>

【讨论】：