Solved

Twiiter bootstrap v3 fixed-footer overlays content

Posted on 2014-12-24
1
326 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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

772 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

10 Experts available now in Live!

Get 1:1 Help Now