CODEWITHSUNDEEP
htmlcss
Emma Chisholm
Emma Chisholm

Reputation: 57

Tips for keeping the footer at the very bottom of the page?

I have tried everything - please help!

I am having a problem with my page's content overlapping on my footer. I have set additional media queries and padding-top for my footer to keep this from happening, but now, across my sites there is a huge amount of white space for no reason.

I don't know what to do to remedy this. My html is set up with 

<html>
<head></head>
<body>
   <nav></nav>
   <div></div>
   <footer></footer>
</body></html>


<footer>
        <div class="row">
<div class="col" style="margin-left:10px;">
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;font-size: 20px;">Support</h1>
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ______ </h1>
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Email: ____.net</h1>
            </div>
            <div class="col" style="margin-left:10px;">
                <h1 style="font-family: 'Open Sans', sans-serif;font-weight: bold;font-style: normal;color: rgb(0,43,92);font-size: 20px;”>_____</h1>
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Contact Us!</h1>
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;padding-top: 5px;">Call: ____ 0</h1><img src="assets/img/logo.svg" style="width: 187px;margin: 0px;padding: 8px;padding-left: 0;padding-right: 0;">
                <h1 style="height: 24px;color: rgb(0,43,92);font-family: 'Open Sans', sans-serif;font-weight: normal;font-style: normal;font-size: 14px;”>©2019</h1>
            </div>
        </div>
    </footer> 


/*phones*/
@media screen and (max-width: 481px){
    footer {
        margin-top:2500px;
    }
}
/*computer screens*/
@media screen and (max-width: 800px){
    footer {
        margin-top:3000px;
    }
}
@media screen and (max-width: 1920px){
    footer {
        margin-top:1600px;
    }
}
footer {
  padding-top: 10px;
}

footer h3 {
  font-size: 12pt;
}

footer p {
  font-size: 9pt;
}

footer ul {
  list-style: none;
  width: 100px;
}

footer {
  width: 100%;
  background-color: #C0C0C0;
}

#footerSect {
  width: 900px;
  margin: auto;
}

footer h3 {
  font-size: 12pt;
}

li {
  padding-bottom: 15px;
}

footer p {
  font-size: 9pt;
}

So far if I don't add margin-top to my css, my content/pictures/text overlaps with the content of the footer, and then nothing is legible. This is also specific to mobile view- it looks just fine on a computer monitor or larger screen.

Upvotes: 0

Views: 54

Answers (2)

Akshay Bhat
Akshay Bhat

Reputation: 314

I would suggest to use position fixed if you want to keep your footer at a single place. Do something like :-

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 60px;
  width: 100%;
}

And then for the div above that use a margin bottom more than the height that you set for the footer so for eg: - 70px. This way your content will never overlap it.

Another way would be to do use calc and subtract the height of the footer from the main container body like this: 

.container {
  width: 100%;
  height: calc(100vh - 60px);
  background: blue;
}

footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: red;
}
<div class="container">
  <header></header>
  <div></div>
</div>
<footer></footer>

Upvotes: 1

EGC
EGC

Reputation: 1789

This should get you out of trouble!

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;  
  background-color: red; /* or whatever */
  width: 100%; /* or whatever */
}

https://jsfiddle.net/3tkphvzc/

If you find your top content overlapping still, you could add a sneaky margin-top: 10000px or whatever

Upvotes: 2

Related Questions