Solved

Twiiter bootstrap v3 fixed-footer overlays content

Posted on 2014-12-24
1
372 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 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