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


    html, body, .container,.embed-row {

    iframe {

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

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

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?

2 Years
Discussion Span
Last Post by diafol

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

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.

Edited by diafol

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.