Solved

Twiiter bootstrap v3 fixed-footer overlays content

Posted on 2014-12-24
1
354 Views
Last Modified: 2015-01-03
I am trying to put a footer on my page (not sticky to where it's always visible but flush on the bottom of the page) The code I am using is:

<div class="navbar navbar-inverse navbar-static-bottom navbar-custom" role="navigation" style="

  position: relative;
  margin-top: -50px;
  height: 50px;
  clear:both;

">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
			<!--<a href="/"><img src="lib/companyimg/main.png" style="height:50px;width:auto;vertical-align:top !important;padding-top:4px;padding-bottom:4px;padding-right: 20px;padding-left:0px;" border=0></a>-->
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li><a href="#">Sitemap</a></li>
			</ul>		
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">My Saved Searches</a></li>
				<li><a href="#">Become An Agent</a></li>
				<li><a href="#" onclick="JavaScript:$('#HelpModal').modal('show');">Contact Us</a></li>			
			</ul>
		</div>	

	</div>
</div>

Open in new window


I have tried adding
body {
	height: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 80px;
}

Open in new window


As suggested by twitter bootstrap docs but I'm still have the same problem:

Content in the page is overlapping with the footer ..

Please advise
0
Comment
Question by:Mark
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40517254
Got from here
http://getbootstrap.com/examples/sticky-footer/

You will still need to add media query styles if your footer height changes across the different widths

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height - adjust for the height of your footer */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Open in new window

0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now