Ways to lower the footer section

Currently, I am utilizing an iframe within my master page which has two different versions. Upon entering the second master page, the iframe is displayed. However, I am encountering an issue where the footer appears above the iframe content rather than below it.

The CSS for the iframe is as follows:

iframe 
 { position:fixed; height: 100%; display:block; width:100%; border:none; } 

The HTML code looks like this:

<div>
   <iframe src="http://ch.tbe.taleo.net/CH10/" style="width:100%; height:100%; bottom="100%; frameborder="0";
                allowfullscreen">
   </iframe> 
</div>

As for my footer section:

 <div>
     <br/><br/>
     <center style="font-size: small; font-family: Arial">
          Please contact Human Resources with any additional questions or concerns via email a <br/>
      </center>
 </div>

The main problem lies in the footer not being positioned at the bottom of the page but overlapping with the content above it.

Answer №1

When your iframe has a fixed position, the footer will move to the top of the page because of it.

The position:fixed property takes the element out of the normal flow and creates space for other elements to fill in.

There are two solutions:

First, if possible, change the position of your iframe to position:relative

Second, add a margin-top to your footer equal to the height of your iframe.

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

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

What causes a header to appear transparent when it has a background color set in HTML?

I'm attempting to create a webpage that resembles Gmail. I have a header with a background color, but when I scroll, the content in the body becomes visible. Here is the view without scrolling: https://i.stack.imgur.com/UQ2sO.png However, while scr ...

Using bxslider along with numerical pagination controls

I need help with implementing numbers instead of bullets in my slider. I also want the numbers to slide along with the content. Here is the code snippet for the slider section in WordPress: <!-- Begin News Slider --> <?php $loop = new WP ...

What is the best way to ensure a logo image is properly scaled to fit its parent container using Bootstrap 4

I am struggling with my navigation bar, which consists of a simple logo and a few links. The issue I am facing is that the logo image is too tall for the parent container, which has a fixed height. It's clear that the logo with the gray background e ...

Request timeout issue in asp.net web application

I am encountering an issue with my asp.net web application. Everything was running smoothly during testing, but once the application started to receive heavy traffic from multiple users, it began experiencing timeout errors. What steps should I take to d ...

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

ToggleBox - select or deselect the box depending on a specific criteria

To achieve the desired functionality, a checkbox needs to be connected to a boolean variable of an object. Upon checking the box, a confirmation pop-up should appear where selecting 'yes' proceeds with the action and choosing 'no' rever ...

Avoiding parent animations from affecting child elements using CSS

nav { display: inline-flex; align-items: center; width: 100%; height: 8rem; border-bottom: 1px solid black; } .nav-list { display: flex; width: 100%; } .nav-list li { line-height: 8rem; position: relative; } .sub-menu li { color: #c4 ...

Is Inline Styling the Key to Effective MVC Client-Side Validation?

Having some trouble with my form's client-side validation. I'm using data annotations and models, but the default display is not visually appealing. I've tried applying CSS, but getting tooltip style errors has been a challenge. What I real ...

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

Upon returning to the website homepage from another page, the JavaScript animation ceases

I implemented a unique typewriter animation on my homepage by utilizing code from this source and making minor HTML edits to customize the content. https://codepen.io/hi-im-si/pen/DHoup. <h5> <body>Hello! I am Jane.</body> < ...

Creating a scroll bar that overlaps a chart within a div

I am currently working on implementing a button that generates a report by plotting some charts. Initially, these charts are hidden until the button is pressed. I am utilizing Bootstrap for the design, and as a result, the scrollbar is also hidden. Upon cl ...

Highcharts is displaying arrows incorrectly on some charts

On a webpage, I have implemented 3 Highcharts charts with a jQuery-UI tabs navigation system - one chart per tab. An arrow is added to the plotted line in just one of these charts through an IIFE (see code sample below). However, when switching tabs to vie ...

Verify if the user is using Internet Explorer browser with .NET framework

Currently, I have my SiteMaster.cs file and I am interested in determining whether the client browser is utilizing Internet Explorer to access my website. Is there a simple method to accomplish this task? Appreciate your assistance. Sincerely, ...

javascript utilize function parameters to pass control names

Is there a way to pass control IDs from code behind to HTML without knowing the control names in advance due to dynamic generation? The regular method using MyTextBox = document.getElementById("<%= TextBox1.ClientID %>"); won't work in this scen ...

Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together. For instance: 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-3 ...

Send data to a JavaScript file

Even though this particular question has been asked and answered multiple times, I am still struggling to find a solution to my problem. I am currently working with Masterpages and JavaScript files, and as many people are aware, Masterpages can be quite t ...

What are the steps to customize a text field without the presence of a border?

I need to style a text field as read-only without showing the border or background color. How can this be achieved? ...

Using the CSS property `absolute` can result in the input element shifting when entering text in Chrome

My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, ...

What is causing the Bootstrap 5 navbar to not collapse?

Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...