CODEWITHSUNDEEP
htmlcss
Madson Paulo
Madson Paulo

Reputation: 57

Body content is overwriting the footer

I am using Bootstrap to make a website with a fixed footer. It happens that the body content is overlapping the footer, just like this image.

By the searchs I made, the footer is less important than the body. I tried putting and ID on the footer but did not solved the problem. Help me please.

footer {
	position:fixed;
  height:35px;
  bottom:0px;
  left:0px;
  right:0px;
  margin-bottom:0px;
	padding-right: 15px;
	text-align: right;;
	color: snow;
	background-color: #9e0000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

footer h6{
	line-height: 0.4;
}
<footer>
		<h6>Universidade Federal de Alagoas</h6>
		<h6>@2017</h6>
</footer>

Upvotes: 2

Views: 1411

Answers (2)

Chun Yin
Chun Yin

Reputation: 290

I can't comment so here's some bad assumptions:

You may have something on your table that's position: relative/absolute and z-index: 2+. https://codepen.io/chunyin/pen/MmXbJy

to fix this, set your footer to a higher z-index using: z-index: 99;

edit: I've checked your code, adding this to your css would fix the problem:

CSS: 

footer {
    z-index: 99;
}

Upvotes: 2

LKG
LKG

Reputation: 4192

You can try this way you can add a div and give it to height like below code example.

CSS

.content {
  height:calc(100vh - 35px); 
  /* 35 px THIS IS YOUR FOOTER HEIGHT YOU CAN CHANGE AS YOU WANT*/
}

Upvotes: 1

Related Questions