Question

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

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

使中间iframe占据整个div宽度

1 个答案: