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

Question

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 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;
}

<footer>        
    <ul class="pFooter"> 
        <li><a href="../index.html" class="pFooterLi"> The SOCIA Circle</a></li>
        <li><a href="mailto:xxxxxxx@gmail.com" target="_blank" class="pFooterLi">xxxxxxxxxxxxx@gmail.com</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" class="whatsapp" class="pFooterLi">+5491144444445 </a></li>
        <li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" class="pFooterLi">Calle Siempreviva 742, Springfield</a></li>
    </ul>
    <section> 
        <ul class="ulFooter">
            <li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
            <li><a href="https://www.facebook.com" target="_blank" class="liFooter" >Facebook</a></li>
            <li><a href="mailto:thesociacircle@gmail.com" target="_blank" class="liFooter" >E-Mail</a></li>
        </ul>
    </section>  
</footer>

Adding a min-height: 100vh; to the MAIN of each page did the work for me — Lautaro Gatti, Jan 12 '22 at 00:30

score 0 · Accepted Answer · answered Jan 11 '22 at 16:46

0

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

answered Jan 11 '22 at 16:46

Steffen Andreas Kloster

176
8

im not sure where should i add this, to the MAIN section that is not big enough? or to the whole html? thanks – Lautaro Gatti Jan 11 '22 at 17:12
i figured it out, i added a min height as suggested to each main that was causing the issue. the problem is that it looks like " min-height " does not accept the mix of VH and %, i ended up doing `min-height: calc(100vh - 10.7vh);` and this worked out – Lautaro Gatti Jan 12 '22 at 00:41

score 0 · Answer 2 · edited Feb 01 '22 at 08:56

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 class="ulNav">
                <li><a href="../index.html" class="navButtons">HOME</a></li>
                <li><a href="../Paginas/businesses.html" class="navButtons">BUSINESSES</a></li>
                <li><a href="../Paginas/map.html" class="navButtons">MAP</a></li>
                <li><a href="../Paginas/be part.html" class="navButtons">BE PART</a></li>
                <li><a href="../Paginas/contactus.html" class="navButtons">CONTACT US</a></li>
            </ul>
        </nav>
    </header> 
    <main class="mainBusinesses">
        <h2 class="titleBusinesses">BUSINESSES</h2>
        <section class="sectionMainBusinesses1">
            <h3 class="pTitleB">LIST OF BUSINESSES</h3>
            <ul class="ulMainBusinesses">
                <li><a href="./businesseslist/pepitalist.html" class="subButtonBusinesses">Pepita</a></li>
                <li><a href="./businesseslist/pepitolist.html" class="subButtonBusinesses">Pepito</a></li>
                <li><a href="./businesseslist/sucutrulelist.html" class="subButtonBusinesses">Sucutrule</a></li>
            </ul>  
        </section>
        <section class="sectionMainBusinesses2">
            <h3 class="subTitleB">Descripcion del Negocio</h3>
            <p class="subDescB">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 class="subMapB">
            <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%3A0xa0b3812e88e88e87!2sBuenos%20Aires%2C%20CABA!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 class="pFooter"> 
            <li><a href="../index.html" class="pFooterLi"> The SOCIA Circle</a></li>
            <li><a href="mailto:sociacircle@gmail.com" target="_blank" class="pFooterLi">sociacircle@gmail.com</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" class="whatsapp" class="pFooterLi">+5491144444445 </a></li>
            <li><a href="https://goo.gl/maps/YUPMCQz92asiy24c6" target="_blank" class="pFooterLi">Calle Siempreviva 742, Springfield</a></li>
        </ul>
        <section> 
            <ul class="ulFooter">
                <li><a href="https://www.instagram.com/sociacircle_ba" target="_blank" class="liFooter" >Instagram</a></li>
                <li><a href="https://www.facebook.com" target="_blank" class="liFooter" >Facebook</a></li>
                <li><a href="mailto:thesociacircle@gmail.com" target="_blank" class="liFooter" >E-Mail</a></li>
            </ul>
        </section>  
    </footer>
</body>
</html>

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

2 Answers2