Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages.

The header remains at the top seamlessly

The footer stays at the bottom perfectly

The content is positioned in the middle flawlessly

However, the iframe does not stretch to fill the entire height of its container. 

I did not specify a pixel height in the style

When I added this CSS:

iframe {
  margin:0;
  padding:0;
  min-height:72%;
  width:100%;
  background-color:#ddd;
}

HTML

<div id="container">
  <div id="header"> blah blah </div>
  <div id="content">
      <div id="menu"> some code for the menu </div>
      <div id="iframeDiv" class="contentdiv">
         <iframe src="#" id="#" width="100%"></iframe>
      </div>
  </div>
  <div id="footer">blah blah</div>
</div>

CSS

html, body {
 margin:0; padding:0; height:100%; width:100%;
}
iframe {
margin:0; padding:0; height:72%; width:100%;
}
#container {
min-height:100%; position:relative; width:100%;
}
#content {
  padding:10px; padding-bottom:30px;
}

I attempted to add styles for #iframeDiv but no luck!

It extended down to the footer, but only in Chrome. Internet Explorer didn't display the background color either. Firefox showed the background color but did not stretch to 72%. How can I make the iframe height stretch to 72% consistently across all browsers?

htmlasp.netcssiframe

Answer №1

Verify the DOCTYPE declaration of your HTML page and consider adding CSS for the HTML and BODY elements:

html, body {
    height: 100%;
}

Answer №2

Struggling with an iframe for a significant amount of time, I decided against specifying the height in pixels (Px) due to potential variations across browsers. Instead, I utilized JavaScript to dynamically calculate the consumed height and then subtracted it from the window height. Finally, I assigned this value to the iframe using jQuery. Here's the code snippet that showcases my approach.

<script type="text/javascript">
 $(document).ready(function() {
  var windowheight = $(window).height();
  var headerheight = $("#header").height();
  var footerheight = $("#footer").height();
  var menuheight = $("#patientMenu").height();
  var frameheight = windowheight - (headerheight+footerheight+menuheight+5);
  //alert(contentheight);
  $('#frameset').css ({
   'height' : contentheight
  });
  });
</script>

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

Eliminating the Skewed Appearance of Text in Input Fields Using CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customized Page Layout</title> <script src="https://c ...

javascripthtmljquerycss

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

Utilize PHP to create HTML permalinks for optimal linking functionality

I am experiencing an issue with HTML and PHP combination. Here is the code snippet causing trouble: $args = array( 'post_type' => 'program', 'posts_per_page' => 100 ); $loop = new WP_Query( $args ); while ( ...

phphtmlwordpresspermalinks

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

focusing on a single div amidst a sea of interwoven dynamically generated divs

I am currently working with the liferay framework and I am facing a challenge where I need to apply inline JavaScript to target a very specific div on my webpage. The catch is that this div is nested within multiple dynamically added divs with varying clas ...

javascriptjqueryhtmlcss

Organize AngularJS ng-repeat using dictionary information

I'm dealing with a dictionary consisting of key-value pairs, which looks something like this: data = { "key1": 1000, "key2": 2000, "key3": 500 } My goal is to display this data in a table using AngularJS. One way I can achieve this is b ...

javascripthtmlangularjs

Tailor-made labels for RadChart

How can I customize the text in a legend when using Telerik tools? Is there a way to change the legend text from the back end using C# or VB.NET code? Based on customer requirements, I need to display combined text from both the X-axis and Y-axis in the ...

asp.netchartstelerik

Eliminate the content located between two specific words in the img src URL and then render the file from the new source by utilizing ht

My img tags have parameters in the url for ajax image crop functionality. Here's an example: <img src="/resize/45-800/files/myImage.jpeg" alt="Chania"> Add /resize/45-800/ before the url to instruct the ajax script to fetch the file from the f ...

phpjqueryhtmlajax.htaccess

The scroll function within the inner div is malfunctioning on the Firefox browser

Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...

javascriptjqueryhtmlcss

Tips for fixed positioning of a div on a webpage without being affected by the Windows logo shortcut keys + Left/Right arrow

Whenever I utilize the keyboard shortcuts to move a window from one side of the screen to another and then minimize it either upwards or downwards, I find myself faced with an issue. I can accomplish this action by using the Windows key in combination with ...

csshtml

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...

csstwitter-bootstrapless

What could be causing the issue with this flexbox footer not functioning properly on a mobile device?

Currently, I am honing my skills in using flexbox to create footers. Although the footer layout I have designed looks great on a desktop screen, it unfortunately doesn't display correctly on mobile devices. You can view the footer layout I have been ...

htmlcssmobileflexboxfooter

How can the output directory of the CSS file generated by Compass/Webby be modified?

I need assistance in getting my *.css file to be outputted in the output/css directory instead of the stylesheets directory. How can I achieve this? Here's what I've already attempted: Compass.configuration do |config| config.project_path = F ...

csssasscompass-sasswebby

Adjusting the height of a Vue component to 100% triggers a change in height whenever a re-render occurs

In my Vue component, there is a class called "tab-body-wrapper" that serves the purpose of displaying the "slot" for the active tab. However, I encountered an issue while troubleshooting where the height of the ".tab-body-wrapper" component reduces during ...

javascripthtmlcssvue.jsvue-component

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

cssreactjs

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

javascriptcsstwitter-bootstrapreactjswebpack

Leveraging XPATH to pinpoint objects based on their RGB background color

I have a table with multiple divs inside it, many of which are identical except for their background colors! Is there a way to select a specific div based solely on its background color? Here is an example of the HTML structure: <div class="fc-event fc ...

htmlcssxpath

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

javascriptjqueryhtmlajax

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

htmlcss

Utilizing Images as Backgrounds in JSP

Looking for assistance with adding a background image in a JSP file without overlapping the navigation bar? Check out my code below: <jsp:include page="index_header.jsp"></jsp:include> <div class="container"> <div style=&ap ...

htmljsp