Hey,

I'm trying to (using bootstrap btw), have a page with a header and an iframe. I want the iframe to take up the remainder of the page's height and 100% width. This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>GAG Documents</title>


    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <style>

    html, body, .container,.embed-row {
        height:100%;
    }

    iframe {
        display:block;
        height:100vh;
    }
    </style>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>View File</h1>
                </div>
            </div>

        </div>
        <div class="row embed-row">
            <div class="col-md-12 embed-row">
                <iframe src="http://docs.google.com/gview?url=<?= $download_url ?>&embedded=true" style="width:100%;" frameborder="0"></iframe>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

The problem is: the iframe is the screen height, so with the header it's too big for the screen.

How can I fix this?

You could:

  1. Make the height of the frame smaller
  2. Make the header fixed or absolute so it will on top of the frame
  3. Plan your interface with carefullness

Define the iframes height in percentage

Member Avatar for diafol

You may need some js magic to calculate the height of your elements.
What's with the header? Does it need to be totally visible on all views, irrespective of mobile orientation for example. You may find that a tiny header on portrait (with hambuger menu) with large area beneath for iframe becomes a different proposition in laandscape when iframe real estate is shrunk to something which is unusable. I'm assuming you have more than you're showing in your HTML. I may be wrong.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.