0

I need an iframe with auto height (no vertical scrolling, it should take all the space it needs and scrolling the main page is just fine).

This does not happen with the current code that I have:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap IFrame Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
    <div class="col-xs-6">Check the iframe at the right</div>
    <div class="col-xs-6">
        <div style="width:100%; height:auto;"> 
        <iframe src="http://www.wsj.com/" style="width:100%; height:auto;overflow-y:hidden"></iframe>
        </div>
    </div>
</div>

</body>
</html>
Adam Tong
  • 571
  • 1
  • 4
  • 16
  • Possible duplicate of [Full-screen iframe with a height of 100%](http://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) – choz Jan 11 '16 at 02:43

2 Answers2

0

Unfortunately this will not be possible per w3schools

Differences Between HTML 4.01 and HTML5 In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

The only hack you can do and this is coming with a HUGE BEWARE SIGN in red and flashing lights is the following CSS code:

html, body, div, iframe {
    height: 100%;
}

/*  OR */

*{
    height: 100%;
}

This code makes everything in your page 100% height, thus also letting your iframe adjust. But Like I mentioned, you will have major issues along the way. The only way I would do this is to design a report screen that is intended for printing only (i.e. a coupon redeeming screen, or small advertisements for mobile apps only)

AGAIN. I strongly discourage anyone to try this for a normal web application

See the DEMO showing the full height

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • my intent is to use it in a web application. – Adam Tong Jan 11 '16 at 15:43
  • I strongly recommend it for the reasons above. As I said, the only thing you can do is what I suggested, but be ready to have a dozen more problems specially since you are using Bootstrap. A framework designed to provide you with a more stable UI architecture – LOTUSMS Jan 11 '16 at 15:47
0
<iframe src="http://maroof.sa/Business/GetStamp?bid=270679" style=" width: auto; height: 250px; overflow-y:hidden;  "  frameborder="0" seamless='seamless' scrollable="no"></iframe>
Atena Dadkhah
  • 623
  • 1
  • 5
  • 19
Fahad ali Sahari
  • 1
  • 1