Why is my footer scrolling with the page?
Question
Okay I am kind of making my personal website and I am coding it been a few days and I am a beginner and I cannot figure out why my #footer is scrolling along with my webpage. It's a problem because it sticks in the middle rather than at the bottom of my website.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="icon.png" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Naveen Niraula | Home</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="wrapper">
<div class="mcont">
<article class="firstart"><br>
<h1>How can you do that?</h1>
<p>What is the use of my website if there is nothing more</p><br>
</article>
<div class="test"></div>
</div>
<div id="test"></div>
</div>
<div id="footer">
<p class="footer">Copyright © 2014 Naveen Niraula. All Rights Reserved.</p>
</div>
</body>
</html>
CSS:
html, body {
margin: 0px;
}
nav {
background-color: #311310;
}
nav ul {
margin: 0px;
padding: 10px 0px 10px 100px;
}
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
}
nav ul li a {
color: #d9d9d9;
text-decoration: none;
}
nav ul li a:hover {
color: #ffffff;
}
#wrapper {
margin: 0px 100px 0px 100px;
background-color: #ebebeb;
}
.mcont {
margin: 0px 5px;
font-family: dejavu;
}
.firstart h1, p {
margin: 0px;
}
#footer {
padding: 5px;
background-color: #009688;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
.footer {
padding: 0px 0px 0px 100px;
color: #333333;
font-family: condensed;
}
#test {
height: 1000px;
background-color: #008080;
}
For making my question more clear I have attached a screenshot of my website down below please check that out.
Oh and yeah that <div id="test"></div> is just for testing out the footer.
6 answers
solution1
4 2014-09-02 13:27:27
You've set #footer to position:absolute; which means it's always going to be absolute to your screen.
Take it away and it will work.
solution2
1 2014-09-02 13:28:19
solution3
1 2014-09-02 13:28:52
Your footer element is position: absolute so it scrolls when windows scroll since it is absolute to your screen. If you wanna make it fixed just position: fixed; . For your requirement just do the following stuff to your style.
#footer{
/*position: absolute;removed*/
}
solution4
1 ACCPTED 2014-09-02 13:34:48
You need to set your html element to position relative and minimum 100% height, so when your footer is absolutely positioned and set to bottom:0 it will truly go to the bottom.
html {
position:relative;
min-height:100%;
}
Then you can set a height to the footer:
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
}
And offset the height of the footer with the same amount of bottom padding to the body:
body {
padding-bottom:100px;
}
This technique is known as "sticky footer". The footer will always stay to the very bottom of the page, no matter how much content there is.
solution5
0 2014-09-02 13:46:05
For bottom you have to set the height of id footer and for center make width. Then make bottom 0px.
solution6
0 2014-09-02 13:48:07
You can set the footer with position:absolute; and add bottom:0; or you could change it to position:relative;
#footer {
position:absolute;
bottom:0;
}
OR
#footer {
position:relative;
}
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.