Solved

Twiiter bootstrap v3 fixed-footer overlays content

Posted on 2014-12-24
1
419 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

739 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