Issue with STICKY footer using FLEXBOX not staying at bottom of page if page is smaller than screen-CodePudding

I've tried everything, from setting the body to a specific 100VH, to give Absolute and Relative statement, some of these would do some "fix" but bring other problems. If i set a 100vh to the body the footer will stay at the bottom but of the page (visible of course as it should as it is sticky) but when you scroll all the way down on some pages there will be a blank space below the footer.

here is the code:

<footer>        
    <ul > 
        <li><a href="../index.html" > The SOCIA Circle</a></li>
        <li><a href="mailto:[email protected]" target="_blank" >[email protected]</a></li>
        <li><a href="https://api.whatsapp.com/send/?phone=5491144444445&text=I would like to speak with Socia&app_absent=0" target="_blank"  > 5491144444445 </a></li>
        <li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" >Calle Siempreviva 742, Springfield</a></li>
    </ul>
    <section> 
        <ul >
            <li><a href="https://www.instagram.com/sociacircle_ba" target="_blank"  >Instagram</a></li>
            <li><a href="https://www.facebook.com" target="_blank"  >Facebook</a></li>
            <li><a href="mailto:[email protected]" target="_blank"  >E-Mail</a></li>
        </ul>
    </section>  
</footer>

and the CSS:

/* FOOTER STYLE */

footer{
    width: 100%;
    height: 6%;
    background-color: #545454;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    align-self: flex-end;
    bottom: 0;
    padding: 0.5%;
    text-decoration: none;
}
.pFooter{
    height: 100%;
    width: 59%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 1%;
    color: white;
    text-decoration: none;
    font-size: 16px;
    list-style: none;
}
.pFooterLi{
    font-size: 20px;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    text-align: center;
    color: white;
}
section{
    display: flex;
    height: 100%;
    width: 40%;
    color: white;
    justify-content: space-evenly;
}
.ulFooter{
    display: flex;
    list-style: none;
    height: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.liFooter{
    color: black;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    list-style: none;
}
.whatsapp:hover{
    color: green;
}

CodePudding user response：

Since you know the height of your footer, you can extend your content element, to be a minimum of 100vh, minus the height of the footer. I'm assuming it's your section element?

section {
  min-height: calc(100vh - 6%);
}

Possibly answered here already: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

CodePudding user response：

Here you can see how it looks in the specific page, hte footer is in the middle of the page cauise the page is short, in the other pages that are not short, but long, the footer works just fine, it comes up and down when you scroll them and everything is visible, is only the short pages that come into issues

/* CONFIGURACION DEl STYLE */
*{
    margin: 0;
    padding: 0;
}

a:-webkit-any-link{
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    list-style: none;
}
a:hover{
    color: black;
    font-weight: bolder;
    
}
body{
    height: 100%;
}

header
{
    /* ... */
    z-index: 99;
}

/* HEADER */

header{
    width: 100%;
    height: 6%;
    background-color: #545454;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    align-self: flex-start;
    top: 0;
}
h1{
    height: 100%;
    width: 29%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    margin-left: 1%;
    color: white;
    text-decoration: none;
}
nav{
    display: flex;
    width: 70%;
    color: white;
}
.ulNav{
    display: flex;
    list-style: none;
    height: 100%;
    width: 80%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.navButtons{
    color: white;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
}



/* FOOTER STYLE */

footer{
    width: 100%;
    height: 6%;
    background-color: #545454;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    align-self: flex-end;
    bottom: 0;
    padding: 0.5%;
    text-decoration: none;
}
.pFooter{
    height: 100%;
    width: 59%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 1%;
    color: white;
    text-decoration: none;
    font-size: 16px;
    list-style: none;
}
.pFooterLi{
    font-size: 20px;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    text-align: center;
    color: white;
}
section{
    display: flex;
    height: 100%;
    width: 40%;
    color: white;
    justify-content: space-evenly;
}
.ulFooter{
    display: flex;
    list-style: none;
    height: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.liFooter{
    color: black;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    list-style: none;
}
.whatsapp:hover{
    color: green;
} 


/* "MAIN" BUSINESSES*/

.mainBusinesses{
    display: flex;
    justify-content: left-;
    height: 100%;
    width: 100%;
    flex-wrap: wrap;
}

.titleBusinesses{
    height: 2%;
    width: 100%;
    position: absolute;
    color: #545454;
}
.sectionMainBusinesses1{
    height: 100%;
    width: 20%;
    display: flex;
    color: #545454;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 2%;
    flex-direction: row;
    display: inline;
}
.pTitleB{
    font-size: 26px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-align: left;
    justify-content: start;
}
.ulMainBusinesses{
    color: #545454;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    font-size: 26px;
    text-align: left;
    justify-content: left;
    list-style: none;
    margin-top: 5%;
}
.subButtonBusinesses{
    color: #545454;
    font-size: 24px;
}
.sectionMainBusinesses2{
    height: 100%;
    width: 50%;
    display: flex;
    color: #545454;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-top: 5%;
    flex-direction: row;
    display: inline;
}
.subTitleB{
    font-size: 20px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-align: left;
}
.subDescB{
    font-size: 20px;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    text-align: left;
    width: 90%;
    margin-top: 2%; 
}
.subMapB{
    height: 100%;
    width: 15%;
    display: flex;
    color: #545454;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    flex-direction: row;
    margin: 2%;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- STYLE CSS -->
    <link rel="stylesheet" href="../style.css">
    <!-- FUENTE DE GOOGLE -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira Sans:wght@200&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <header>
        <h1><a href=index.html>The SOCIA Circle</a></h1>
        <nav >
            <ul >
                <li><a href="../index.html" >HOME</a></li>
                <li><a href="../Paginas/businesses.html" >BUSINESSES</a></li>
                <li><a href="../Paginas/map.html" >MAP</a></li>
                <li><a href="../Paginas/be part.html" >BE PART</a></li>
                <li><a href="../Paginas/contactus.html" >CONTACT US</a></li>
            </ul>
        </nav>
    </header> 
    <main >
        <h2 >BUSINESSES</h2>
        <section >
            <h3 >LIST OF BUSINESSES</h3>
            <ul >
                <li><a href="./bussineseslist/pepitalist.html" >Pepita</a></li>
                <li><a href="./bussineseslist/pepitolist.html" >Pepito</a></li>
                <li><a href="./bussineseslist/sucutrulelist.html" >Sucutrule</a></li>
            </ul>  
        </section>
        <section >
            <h3 >Descripcion del Negocio</h3>
            <p >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus ex tempore, pariatur inventore aliquid optio eaque rerum repellendus quas nostrum similique vero veniam quo rem deserunt laboriosam commodi id dicta!</p>
        </section>
        <div >
            <iframe  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d105073.26483387475!2d-58.50333871240229!3d-34.615803735965876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca3b4ef90cbd:0xa0b3812e88e88e87!2sBuenos Aires, CABA!5e0!3m2!1ses-419!2sar!4v1640186361592!5m2!1ses-419!2sar" width="300" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </main>
    <footer>        
        <ul > 
            <li><a href="../index.html" > The SOCIA Circle</a></li>
            <li><a href="mailto:[email protected]" target="_blank" >[email protected]</a></li>
            <li><a href="https://api.whatsapp.com/send/?phone=5491144444445&text=I would like to speak with Socia&app_absent=0" target="_blank"  > 5491144444445 </a></li>
            <li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" >Calle Siempreviva 742, Springfield</a></li>
        </ul>
        <section> 
            <ul >
                <li><a href="https://www.instagram.com/sociacircle_ba" target="_blank"  >Instagram</a></li>
                <li><a href="https://www.facebook.com" target="_blank"  >Facebook</a></li>
                <li><a href="mailto:[email protected]" target="_blank"  >E-Mail</a></li>
            </ul>
        </section>  
    </footer>
</body>
</html>