Footer Troubles on Internet Explorer 11

I am experiencing an issue with the layout in Mozilla and IE 11. The content inside the Div is appearing below the footer, as shown in the screenshot provided. Below you can find the code for the div and the footer sections. The Div is enclosed within a section tag and consists of a single row containing Left-side, center, and right-side divs. The right-side div should be scrollable while the footer should start at the end of the content. https://i.sstatic.net/Hxh41.jpg

https://i.sstatic.net/xsH2s.jpg

https://i.sstatic.net/sJqBi.jpg 

.footer-area {
  padding: 70px 0px;
}

.single-footer-widget {
  color: #fff;
}

.right-side {
  float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-3 right-side" style="overflow-y:auto;max-height:1400px;">
  <div style="margin-bottom:15px;">
  </div>
</div>
<!-- //Footer -->
<footer class="footer-area" style="position:relative;">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Dedication</h6>
          <div class="row">
            <div class="col">
              <p>Dedicated to <u style="cursor:pointer;" data-toggle="modal" data-target="#introModal">"Mian Abrar-ul-Wahab Kakakhaill"</u></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Navigation Links</h6>
          <div class="row">
            <div class="col">
              <ul>
                <li>
                  <a class="customText" href="index.php">
                    <p class="footerHover">Home</p>
                  </a>
                </li>
                <li>
                  <a class="customText" href="blog.php">
                    <p class="footerHover">Blog</p>
                  </a>
                </li>
                <li>
                  <a class="customText" href="about.php">
                    <p class="footerHover">About Us</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3  col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Our Address</h6>

          <h6> UK OFFICE </h6>
          <p><strong>Suite 3 Davis House </strong><br>
            <strong>Lodge Causeway Trading Estate </strong><br>
            <strong>Lodge Causeway - Fishponds </strong><br>

          </p>

        </div>
      </div>
      <div class="col-lg-3  col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>OFFICE2 </h6>
          <p><strong>Capital Tower 2,Office # 2</strong><br>
          </p>
        </div>
      </div>

    </div>
  </div>
</footer>

htmlcssbootstrap-4

Answer №1

Through extensive research online, I devised a solution by creating a function within the document.ready method. By waiting for 5 seconds, I was able to calculate the total height of the document and subtract the footer's height from it. This number was then added to the margin-top of the footer element.

$(document).ready(function (){
setTimeout(function(){
            var documentHeight = $(document).height(); 
            var footerHeight = $('.footer-area').height();
            var footerMargin = parseInt(documentHeight) - parseInt(footerHeight);
            $('.footer-area').css('margin-top',footerMargin);
  }, 50000);
});

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

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

Bootstrap does not have the capability to add additional background layers

I'm currently working on building a website using Bootstrap, and I have three backgrounds stacked on top of each other within separate divs. However, I'm facing an issue where only the first background is showing up and the second and third backg ...

htmlcssbootstrap-4

Unique layout designs for various screen sizes with bootstrap grids

Our project has a specific need for a 12 Column Grid on Desktop view, but the layout should change to an 8 column grid on Tablet view. We are wondering if this is achievable in Bootstrap. If so, could you please guide us on how to implement it? ...

csstwitter-bootstrapbootstrap-4

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

MaterialUI AppBar is missing a crucial element

I recently dived into the world of Material UI for React and it's been a good experience so far. However, I've noticed a white gap in my header that I can't seem to get rid of. https://i.sstatic.net/zAZJu.png Here is the snippet from my in ...

cssreactjsmaterial-ui

When it comes to HTML and Javascript, there is a distinct contrast between an ajax call and altering the content of an

I am currently working on coding a JavaScript function to allow liking a specific post on Tumblr. I came across this helpful resource for reference. Initially, I attempted using an ajax call instead of modifying the source of an iframe, but unfortunately, ...

javascripthtmlajaxiframe

When implementing the navbar-fixed feature in Materialize, I've noticed that my icon disappears

Why does my icon disappear when using navbar-fixed with materialize, but not when I use the fixed navbar? Icon with regular navbar: https://i.sstatic.net/Z5XEl.png Icon with navbar-fixed: https://i.sstatic.net/HHgWv.png ...

jqueryhtmlcssmaterialize

Is there a way to access comprehensive data pertaining to an ID through Ajax?

I need help with an Ajax call. Below is the code I currently have: $.ajax({ async: true, url: 'test/', type: 'POST', datatype: 'text json', data: { id: id, }, success: function(data) { // Retrieve the da ...

javascriptjqueryhtmlajax

Refresh wicket components with AJAX following a button click event

Using wicket components here with the following view. https://i.sstatic.net/UqpmQ.png Facing an issue where I need to regenerate and reload the report frame upon clicking the GO button. Despite replacing the old element with a new report element, the div ...

javahtmlajaxwicketreload

Using JavaScript, retrieve the ID of a child element by utilizing details about the parent element

I have implemented a JavaScript function that creates a div element. Within this div, there are multiple checkboxes as child elements. My goal is to use a loop to extract the ids of all these checkboxes. The div has been assigned to a variable named: o ...

javascripthtmlparent-child

What steps should I take to preserve past data within a variable?

Let's say I have a variable that stores text entered into a textarea. If I update the text in the textarea, I want to compare the old value stored in the variable with the new value. One way to approach this is by using two variables for comparison. H ...

javascripthtml

Firefox and Safari experiencing issues with Flexbox padding at the bottom

While scrolling down the .parent div, you should notice that its red background appears at the bottom due to the padding-bottom property. Interestingly, this effect is visible in Chrome but not in Safari and Firefox. .container { display: flex; widt ...

cssflexbox

Presenting tabular information using Python's Flask framework

I'm trying to display data from a database in a table on my webpage, but it's not formatting correctly. Here's what I want it to look like: Name John Mark Faculty CS University XXX But instead, it appears like this on the webpa ...

htmlhtml-table

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

javascripthtml

What is the best way to ensure the table header is aligned and maintained at the top of the table?

Currently tackling a virtualized table issue with an example. Any tips on aligning the table header correctly and making sure it stays at the top of the table when scrolling? Check out the code sandbox for reference:- https://codesandbox.io/s/material-ui ...

cssreactjsmaterial-ui

Send the completed form to the websocket for processing

I am currently in the process of sending basic login information to a server. The requests and functions are functioning perfectly for the test user "testuser." I want individuals to have the ability to input their own username and password for considerati ...

htmlauthenticationwebsocket

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

When working with HTML entities, it decodes the ampersand symbol as &

Currently, I am developing a website using ASP.NET MVC which supports multiple languages. Whenever I try to input &#233; to display the character é, it ends up converting it to &amp;#233;. It appears that the system is automatically converting & ...

htmlasp.net-mvchtml-entities

Is there a method to prevent Apple OS from applying its default styles to form fields, scrollbars, and other elements?

Is it possible to remove the default Apple styling (such as the blue glow) applied to focused DOM elements in OS X or iOS using CSS or JavaScript? I've searched online but couldn't find any information on this topic. I'm starting to think t ...

cssiosmacosfocusnative

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions: The timeout set in the useEffect function expires. ...

javascriptcssreactjsmaterial-ui