Is there a way to adjust the iframe height to be 100%?

Apologies for any language mistakes as English is not my first language. I will do my best to explain my question clearly.

I am trying to adjust the iframe height to 100%, but I have tried various solutions without success. Here is a snippet of my code:

HTML:

<div id="header_PA">
    <div id="menu_PA"> 
   <div id="logo_PA"> 
       <img src="_images/1.png" title="Local PA" id="logo">
   </div>
   <div id="sections_PA">
           ...
       </div>

   <div id="user_box">
       ...
    </div>
    </div>

    <div id="sub_menu_PA"> </div>
</div>

<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>         

<div class="smallFooter">
    ...
</div>

CSS:

#header_PA{
    position: fixed;
    width: 100%;
    height: 70px;
    z-index: 999;
}

#iframe_PA{
    width: 100%;
    height: 100%;
    margin-top: 73px;
}

.smallFooter {
    background: #121212;
}

This is just a portion of the HTML and CSS code.

The issue can be seen in this screenshot:

Screen Capture

While the width property seems to work, the height does not adjust properly. Any suggestions on how to resolve this would be greatly appreciated!

Thank you in advance for your help!

Answer №1

Here is a sample code snippet that demonstrates setting the width and height of an iframe:

<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe> 

Answer №2

To dynamically adjust the height of an iframe element, you can use a bit of JavaScript.

Here is a sample code snippet that demonstrates how to achieve this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Auto-adjusting iframe height</title>
<style>



</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //Adjust height for FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //Adjust height for IE6, IE7 and Chrome
}
}

window.onload=sizeFrame; 

//-->
</script>
</head>
<body>


<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is required to view this web site.
</iframe>
</body>
</html> 

Source:

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

Navigating through the page with an Anchor Jump

I am currently working on implementing a feature called "Anchor Jumping" in my web application using JavaScript and Angular 2. This functionality would allow users to navigate between different sections within a single page. According to the client's ...

Steps to add a background image without a border:

I am struggling to insert an image within an anchor tag. <a> <img calss="imageclass"/></a> Whenever I try, a border appears around the image. I have attempted using CSS properties like border: 0 and border-style:none, but nothing seems ...

Generating small image previews in JavaScript without distorting proportions

I am currently working on a client-side Drag and Drop file upload script as a bookmarklet. To prepare for the upload process, I am utilizing the File API to convert the images into base64 format and showcase them as thumbnails. These are examples of how m ...

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

I have been trying to incorporate a feature on my Shopify frontage website where our logo appears fullscreen and then fades away or disappears after a few seconds, allowing people to access the rest of the website. However, I am facing difficulty in making ...

I would like to showcase the image with specific dimensions in CakePHP

Currently working on a CakePHP application where I need to upload an image. However, for some sections of my app, I need to display the image at a specific height and width without losing image quality. Any suggestions on how to achieve this? ...

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...

Setting specific variables in an array with corresponding key-value pairs

I need help with extracting specific columns from a table that has 5 columns. The columns in question are: column1, user_id, column3, column4, and user_exp. Let's say I have the following select query: $mat_sql = mysql_query( "SELECT * FROM users ...

Surprising CSS overflow error

Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...

Conceal elements that are overflowing slightly

I need help coming up with a purely CSS solution to hide div 3, which has extended beyond its container. Look at the picture linked below for reference. https://i.stack.imgur.com/isfvU.jpg ...

Alignment and spacing in a flexible direction

Hello, I am developing a bar app. <AppBar position="sticky" className={classes.appBar} > <Container maxWidth="lg"> <Toolbar className={classes.root}> <Typography noWrap> <img src={require("./node ...

Incapable of composing text using the MUI SearchBar

I'm having trouble with my Material UI search bar - it's not letting me type anything into it. How can I resolve this issue? Despite trying the suggested code snippets from other answers, I keep encountering errors when integrating them into my ...

What could be causing the hover styling to not be effective on my div element?

I stumbled upon this interesting website that showcases a variety of captivating button designs with hover effects. Excited to try them out, I copied some examples but encountered difficulties making them work on my own site: div { width: 90%; heig ...

What is the reason that CSS does not have built-in support for variables and hierarchy?

I am relatively new to UI development and I find CSS to be quite challenging to work with. Scenario: [ Experimented with CSS & less ] I wanted to apply specific styles within a particular div on a page. CSS approach : div.class1 { font: normal 12px ...

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Trying to establish the selected date range in an ng-model called dateRange in the following HTML. The input text field displays the selected value correctly, but dateRange remains null. What steps can I take to address this issue? <!DOCTYPE html> ...

In search of the precise locator for conducting Selenium tests

During my project work, I've encountered the challenge of finding the correct locator for Selenium testing. Despite trying various combinations, I can't seem to locate the right one to click on a specific link. Every attempt results in a "No Such ...

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

Store the location coordinates in PHP variables

I need help saving the latitude and longitude into PHP variables. I want the output to look like this: <?php echo $latitude ?> Below is a script for capturing the location (taken from w3schools): <button onclick="getLocation()">Try It</bu ...

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...