I'm trying to get a footer which will stick to the bottom of the browser if there's not enough content, or stick to the bottom of the page if there is enough content such that it exceeds the browser's height. Does there exist a
.navbar-static-bottom
class in bootstrap3?
On a separate note, I'm having some issues with styling my footer. I would like links to the left, and some plain text to the right. This jsfiddle is the opposite of what I want. I don't think that pull-right and pull-left is the ideal solution. It seems kinda hacky. I changed button to pull-left and the text to pull right, which only gave the (almost) right look when the window was condensed. The margins are off though.
I accomplish this using a bit a JavaScript:
$(window).bind('load', function () {
resizeElements();
function resizeElements() {
headerHeight = $('.navbar').height();
footerHeight = $('footer').height();
if (($(document.body).height() + footerHeight) < $(window).height()) {
$footer.addClass('navbar-fixed-bottom');
} else {
$footer.removeClass('navbar-fixed-bottom');
}
}
$(window).resize(resizeElements);
});
This allows me to avoid any wrap classes.
you can to use .navbar-fixed-bottom class to if you want the footer to be fixed at bottom.
In case you need a sticky footer you can try this
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
footer { position: relative; margin-top: -150px; /* negative value
of footer height */ height: 150px; clear:both; padding-top:20px;
color:#fff; }
Found this here http://bootstrapfooter.codeplex.com/
I used this code works for me:
HTML
<div class="container" id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
© 2013
<br>
Powered by
Bootsrap
·
Fontawesome
</div>
</div>
</footer>
</div>
CSS
#footer{
position:relative;
bottom:0;
background-color:#navbar-inverse-bg;
border-color:#navbar-inverse-border;
color:#navbar-inverse-color;
}
Related
I'm trying to build a map view in my react app similar to what you'd see on Zillow. Here's a screenshot:
Zillow
Unfortunately, I'm not sure the best way to handle setting the container to 100% of the view between the available realestate.
Here's the markup (including some other components so you can see how it fits)
<Navbar></Navbar>
<SearchByMap>
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</SearchByMap>
When I set the container's height to 100% it doesn't do anything. However, given this layout, how can I make sure that it fits nicely and with overflow: hidden so that its similar to how Zillow handles its map view?
Thanks
You can easily do this with flexbox by setting the height of the parent to 100% or 100vh, and applying flex-grow: 1; to the element you want to grow using all available space.
*{margin:0;padding:0;}
body,html {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
Navbar {
background: #eee;
}
SearchByMap {
flex-grow: 1;
background: #ccc;
}
<Navbar>nav</Navbar>
<SearchByMap>
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</SearchByMap>
You can use calc . If your header is 50px in height then set it to calc(100% - 50px)
Here's a snipppet:
.Navbar{
height:50px;
width:100%;
background-color:red;
}
.SearchByMap{
width:100%;
background-color:green;
height:calc(100% - 50px);
}
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
<div class="Navbar"></div>
<div class="SearchByMap">
<!-- just gonna put the basic html of this component here -->
<div class="container">
<div class="map-view">
</div>
<div class="list-view>
</div>
</div>
</div>
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I have a live website located here:
my website
The problem is the footer navigation bar does not position all the way at the bottom of the browser as shown here:
There is a bit of blue spacing, which is not what I want to achieve.
I'm using twitter bootstrap, if that helps, but the footer bar div object is called "navbar navbar-default"
If I named the footer div like so:
<div class="navbar navbar-default navbar-fixed">
then, the navbar sticks to the very bottom of the browser window, but it stays fixed, which is not what I want.
Currently, the code is like so:
<div class="navbar navbar-default navbar-fixed">
How can I achieve my goal?
Thanks
EDIT: I apologize guys, my website has the footer fixed, but if the code did not have the footer bar fixed, it will have the spacing. I apologize for the confusion.
I'm not familiar with Twitter Bootstrap, but the spacing is most likely caused by padding or margin somewhere between the body tag, and/or the footer tag and everything inside it. In chrome's code inspector I see calculated margin-bottom of 20px in <div class="navbar...">, and also 60px in <body>.
A quick test is to modify <div class="navbar">:
<footer>
<div class="navbar navbar-default" style="margin: 0;">
See if anything changed. If not:
<body style="margin: 0;">
Tested in Chrome's code inspector and the footer is placed at the bottom without any spacing (and doesn't "stick"), but it's a hack so you should probably find a better way / to follow the bootstrap's logic.
Try this
You can try this
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
This is the easiest way I've been able to get a header/body/footer to work. Demo
HTML
<div class="wrap">
<div class="header">
</div>
<div class="body">
</div>
</div>
<div class="footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.header {
height: 100px;
background-color: red;
}
.wrap {
height: 100%;
background-color: green;
margin-bottom: -100px; /* Must be negative height of footer */
}
.footer {
height: 100px;
background-color: blue;
}
I was working with sticky footer, but it wasn't working out as it should and was giving something like 200 or 400 px of extension past the viewport.
I thought it would be easier to show what I need rather than explain it, see below:
EDIT: I updated my code to reflect what it looks like with sticky footer.
Sticky Footer jsFiddle
ORIGINAL
And here is my code:
<div id="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<footer>
Footer
</footer>
</div>
Also noticed that I have a sidebar in the code but not in the picture provided. I will need a sidebar as well without a background.
You did not follow the tutorial or I'd see an empty div with class push in your wrapper. Also, footer should not be inside your wrapper.
As per the online tutorial...
<body>
<div class="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<div class="push"></div>
</div>
<footer>
<p>Copyright (c) 2008</p>
</footer>
</body>
The CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as footer */
}
jsFiddle Demo Page
Please try the above and post your actual CSS.
Try this method to anchor the footer at the bottom.
.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}
I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page.
http://www.cssstickyfooter.com/
you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012
Here is my html code, with some taking out for simplicity
<div class="container">
<div id="main" class="row">
<div class=" twelve columns ">
<div class="row">
<div class="11 columns offset-by-one">
<img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
</div>
</div>
</div>
</div>
<!-- container ends-->
</div>
<div id="footer" ></div>
Here is my css declarations
.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}
Update the css on line 45 foundation.css
html {
font-size: 62.5%;
height:100%
}
See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg
Try bottom:0;min-width:100%; as part of your CSS
I added postion:fixed;display:block;min-width:100%;bottom:0; and it worked out fine. If you are going to be doing this I would probably also make the top of your footer.gif transparent. Or try a .png file with transparency.
Try this HTML code:
<body>
<div class="container">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS code:
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}