0

In my app I'm trying displaying a pdf in an iFrame (got that covered).

My problem is that the iFrame doesn't take up the full space of the page between my header and footer divs. I'm using Jquery Mobile 1.1.0 for my themes.

I don't think it's something as minor as margins & padding. It's on a much larger scale of open space.

Here is my html:

    <!-- Start of pdfReader page: #pdfReader -->
<div data-role="page" id="pdfReader" data-theme="b">

    <div data-role="header">
        <h3 id="keyHeader2">Key Description</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <iframe id="pdfFrame" width="100%" height="auto" src=""></iframe>
    </div>

    <div data-role="footer" class="footer">

        <p class="margin">
            <a href="#keyPopup" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back</a>
        </p>

    </div>
</div> <!-- /#pdfReader -->

Relevant CSS:

.footer{
    position:fixed;
    height:50px;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}

JQM links:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

As I've said. My problem is that the div containing the iFrame won't take up the full height of the page (leaving an unappealing empty space). Sorry if this is a basic fix but my CSS is rather rusty, especially when it has to conflict with the JQM CSS. Help is greatly appreciated>

Thank you in advance.

Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143

1 Answers1

0

There is a very little CSS issue here. The wrapping div around the iframe has a padding that needs to be canceled.

div.ui-content {
    padding: 0;
}

and then to make your iframe full-height (excluding the navbar and the footer) simply add this to your iframe

iframe#pdfFrame {
    min-height: calc(100% - 100px)
}

Here is a demo JSFIDDLE: http://jsfiddle.net/ymKL9/2/

Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50