Page overlap with footer as device height decreases-CodePudding

I have read through multiple posts regarding the issue of the footer not staying at the bottom of the page and resolved it with relative min-h-[calc(100vh-95px)] in the main div and absolute inset-x-0 bottom-0 in the footer. However, it is now the case that the page, or more precisely the button for the form is overlapping with the footer.

As the page height decreases, the button overlaps the footer and the rest of the page elements are overlapped by the footer. As the page height increases, so does the space between the page and footer. I've tried to adjust the min-height but that doesn't seem to resolve the issue.

I have also tried to set mb-1 to the page, the z-index to 9999 for the footer and mt-1 to the footer but the issue hasn't resolved.

Edit

The z-index class set to 9999 keeps the footer at the bottom but changing the max-height:500px to static causes the footer to move upwards and overlap with the page.

Footer.jsx

import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';


const Footer = () => {
  return (
    <div className='relative min-h-[calc(100vh-95px)]'>
    <footer className='bg-black text-white text-center w-full absolute inset-x-0 bottom-0 z-index'>
      ...
    </footer>
    </div>
  )
}

export default Footer

Contact.jsx

import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg'

const Contact = () => {
  return (
  <div className='mb-1'>  
    <div className='flex flex-col justify-center items-center space-y-5'>
      ...
    </div>
  </div>
  )
}

export default Contact

Index.css

@tailwind base;
@layer base {
    html {
        @apply font-serif
    }
}
@tailwind components;
@layer components {
    .contact-input{
        @apply border-b border-black text-center sm:px-2.5 mobile:px-10 tablet:px-28;
    }
    .z-index{
        z-index: 9999;
    }
}
@tailwind utilities;

CodePudding user response：

Did you try to add a media query for the footer? Can you try to set a static position for a maximum height?

For example:

@media (max-height: 500px) {
  footer {
    position: static;
  }
}

Or did you try to add the z-index class with a value of 9999 to the footer, to ensure that the footer is always in front of the other elements regardless of the device height.

CodePudding user response：

All I needed to do was to change absolute to sticky and remove the min-height from the parent div.

Hope this helps someone else :)

import React from 'react';
import { CiTwitter } from 'react-icons/ci';
import { IoLogoInstagram } from 'react-icons/io';

const Footer = () => {
  return (
    <div className=''>
    <footer className='bg-black text-white text-center w-full sticky inset-x-0 bottom-0 mt-5'>

....

</footer>