What is the best way to ensure the content div fills all available space? (JQM compatibility concerns)

Currently, I am facing an issue with displaying a pdf in an iFrame within my app. The problem lies in the fact that the iFrame does not occupy the entire space between the header and footer divs on the page. I am utilizing Jquery Mobile 1.1.0 for the themes.

I have ruled out minor factors such as margins and padding, as the open space appears to be on a larger scale. Below is the relevant segment of 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 -->

Furthermore, the CSS snippet dealing with the footer is as follows:

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

Additionally, here are some important 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>

To reiterate, my main concern revolves around the div containing the iFrame not occupying the full height of the page, resulting in unwanted empty space. Any assistance or guidance on how to address this issue would be greatly appreciated. Thank you in advance!

Answer №1

There seems to be a minor CSS issue that needs attention. The padding around the iframe's wrapping div should be removed.

div.ui-content {
    padding: 0;
}

To ensure your iframe is full-height (excluding the navbar and footer), add the following code:

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

You can view a demonstration on JSFIDDLE here: http://jsfiddle.net/ymKL9/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display only distinct dates in the ng-repeat list

I'm trying to display an unordered list created using ng-repeat. Each list item includes a month header and a blog post. I'm struggling to find a clean solution to only show one instance of each month name without resorting to complex jQuery hac ...

Various HTML tables display varying column widths even when utilizing the same colgroup settings

I'm facing an issue with multiple HTML tables on a single page, each following this structure: H2 Header Table H2 Header Table H2 Header Table My requirement is to have all tables occupy 100% width, with columns set at widths of 50%, 30%, and 20%. I ...

What is the best way to wrap a div in a vertical orientation?

I'm looking to create a vertical div around an image that fluidly changes width: |_________________| | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | | |XXXXXX| | |-----------------| The cont ...

Flexbox is not properly repeating elements horizontally

I am struggling to align text boxes horizontally within ngFor loop, and I can't seem to pinpoint the mistake. Here is the HTML code from the parent component: <div class="maintenance-section"> <div class="yearly"> ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

Encountering Issues with Formatting InnerHtml Text using RegEx

Technology: React.js I have been working on a custom function in JavaScript to highlight specific words within a code block. The function seems to be functioning correctly, but the highlighting isn't staying after the function is completed. Any ideas ...

Is there a way to add the date icon next to the date picker input in Bootstrap 5?

I'm struggling with getting the date icon to display after the date selection input in Bootstrap 5. It keeps showing up below it instead. https://i.sstatic.net/kD2GL.png Here is the code I am using: <form data-toggle="validator" class=& ...

The form inputs within the modal are unresponsive to clicks

I recently began using bootstrap modals and had a separate register/login page from the index. I thought incorporating the login/register form into modals would be a good idea. However, inside the modal, all the inputs are not clickable - only accessible v ...

javascript code for subtracting values in arrays

I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...

I am looking for a highly specialized jQuery selector that fits my exact requirements

Hello everyone, I'm encountering an issue with a jQuery selector. Here is the HTML code snippet: <div id="Id_Province_chzn"> <a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"> <span> + this.default_tex ...

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

How can I utilize Bootstrap to properly space items within a layout?

I'm having some difficulty creating spaces between the controls while using ml-auto. My goal is to have each control separated with spaces in between, specifically the "Core Status label" should be far apart from each other and aligned on a horizontal ...

Can an enterprise level web application be effectively built using [HTML5 + jQuery] (without ASP.NET) + WCF?

We have been utilizing ASP.NET web forms for a long time to get some perspective. While we understand the advantages of MVC over web forms, there's now a suggestion on the table to skip all abstraction layers and move directly from a pure .HTML page ...

Is there a way to adjust the padding of html and body elements to 0 in Vue.js without interfering with the styling of bootstrap

In my Vuejs project, I am designing a bootstrap navbar that has left and right margin spacing, even though I have not added any body or html padding. When I navigate to the welcome.blade.php file and set the body and html padding to 0 as shown below: *{ ...

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

Guide on using Selenium and Python with the buster extension to easily navigate through ReCaptcha

I am currently automating certain processes using Selenium and encountering the challenge of solving Google ReCaptcha. The technology I use to tackle this issue is the browser Plugin Buster. To enter the Google ReCaptcha, I employ the following code: drive ...

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...