CODEWITHSUNDEEP
javascripthtmlcssiframe
Code Guy
Code Guy

Reputation: 3198

Make middle iframe to occupy full div width

I have an iframe in the content section.

How do I make it occupy across div completely covering the area?

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

This iframe doesnt occupy the full coverage area of a content. An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

Upvotes: 1

Views: 59

Answers (1)

Anzil khaN
Anzil khaN

Reputation: 1984

Added position: relative; to .box .row.content. And position: absolute; to 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>

Upvotes: 1

Related Questions