CODEWITHSUNDEEP
htmlcss
sanjihan
sanjihan

Reputation: 6014

prevent footer from moving when window is resized vertically

How do you stick the footer to the bottom of the page and keep it from moving up, while the window resizes vertically? The footer should disappear when the the window gets smaller in terms of height.

This video shows how the footer moves: https://vid.me/Lqk6.

The problem is that the footer may overlap some content, when screen is resized. How do I prevent this from happening?

My code for the footer so far:

 #footer{
  bottom: 0px;
  position:fixed;
  height:50px;
  left: 0px;
  right:0px;
  margin-bottom:0px;
  background-color: black;
  color: white;
  text-align: center;

}
#wrapper{
  height: 1000px;
}

html,body {
  height: 100%;
}
<body>
	<div id="wrapper">
		<div id="footer">Footer</div>
	</div>
</body>

Upvotes: 2

Views: 7019

Answers (5)

Roshan Yadav
Roshan Yadav

Reputation: 143

You can try to put the body contents inside the "main" tag, which you want to get displayed in the middle and keep the footer inside the "footer" tag. <body> <main> <header> bla bla bla </header> rest of the body contents </main> <footer> bla bla bla </footer> </body>

I was also facing the same issue, when I added the "main" tag it worked.

Upvotes: 0

Alexander Nied
Alexander Nied

Reputation: 13623

Sarmad Aijaz is correct-- the fixed positioning is causing the problem. I think this will solve it for you: 

 #footer {
    bottom: 0px;
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    background-color: black;
    color: white;
    text-align: center;
}

#wrapper {
    height: 1000px;
    position: relative;
}

html,body {
    height: 100 % ;
}
<body>
 <div id="wrapper">
    <div id="footer">Footer</div>
 </div>
</body>

By setting the #wrapper to position: relative;, we ensure that the #footer absolute positioning will be relative to the #wrapper (as it is the first non-statically positioned parent element). If you'd prefer it to be relative to the document, just omit the relative positioning on the #wrapper element.

Upvotes: 2

idan
idan

Reputation: 91

This solution depende which resoulosion of users' device. You can configure it by using @media attribute.

Acordding to my device, I changed the folךowing 2 lines and it worked like you want:

top: 580px; position:relative ;

Upvotes: 1

Eric Wiener
Eric Wiener

Reputation: 5947

If you want to keep the footer at the bottom of the text (sticky footer), but keep it from always staying at the bottom of the screen, you can use: position: relative; (keeps the footer in relation to the content of the page, not the view port) and clear: both; (will keep the footer from riding up on other content).

Upvotes: 0

Sarmad Shah
Sarmad Shah

Reputation: 3805

It is because your position is fixed in #footer... you can change it to absolute or relative

Upvotes: 0

Related Questions