CODEWITHSUNDEEP
htmlcssfooter
user10171583
user10171583

Reputation: 41

Keeping the footer at the bottom of the page in mobile view

I have made a website using html and css. The site behaves perfect in desktop and laptop view but, when I test it in mobile biew, the footer is not behaving properly, it doesn't show up at the bottom of the page, rather remaining somewhere above the bottom of the page. My style sheet for body and footer is as follows:

html{
  overflow-x:hidden;
}

body {
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#303036;
  margin:0px;
  background:url('../images/main.jpg');
  background-repeat:repeat;
  min-width:1100px;
  position: relative; 
  height:100%;
}

footer {
  color: white;
  width:100%;
  padding:0;
  display:block; 
  clear:both;
  bottom:0;     
}

do I need to make any change to make the footer stay at the bottom of the page in mobile view?

Upvotes: 2

Views: 3740

Answers (2)

Felipe Augusto
Felipe Augusto

Reputation: 8184

Your problem is related to the position value of footer (defaults to display: block;). You can change your code to:

footer {
  color: black;
  width:100%;
  padding:0;
  clear:both;
  bottom:0;
  position: absolute; //change here   
}

And other thing to make sure you're getting a correct height:

html{
  overflow-x:hidden;
  height: 100%;
}

Upvotes: 2

brianespinosa
brianespinosa

Reputation: 2408

In your css, the "bottom" attribute is not doing anything right now for the footer. You need to add a "position" attribute for that to do anything. Depending on how you want this to work and what the containing markup and styles are, you could use either position: absolute or position: fixed. Both will remove your element from the flow of the document, but they do slightly different things past that. You'll need to add some more styles to your footer once you apply a position attribute to get it to look how you want.

Upvotes: 1

Related Questions