Tips for keeping the footer at the very bottom of the page?
Question
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.
2 answers
solution1
2 2019-09-20 04:48:22
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
solution2
1 ACCPTED 2019-09-20 06:02:55
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.