Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Twiiter bootstrap v3 fixed-footer overlays content

Posted on 2014-12-24
1
Medium Priority
?
522 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 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…
Suggested Courses

782 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