I'm using bootstrap without any modification. The layout is pretty simple. I've a top navbar. Then the main container. And in the end, I've a footer. Something like:
<head>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
background-color: #ECECEC;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// navbar elements
</div> <!-- end of class navbar -->
<div class="container">
// fluid-row class with two column structure
</div> <!-- end of class container -->
<div class="footer">
<div class="container"> <!-- using container to left-align footer to the main content -->
// some content
</div> <!-- end of class footer -->
</body>
There are two things that am not able to do.
1) Whenever there's less content in the main container class, I need the footer to be aligned at the bottom of the screen. I tried min-height:100% but am doing something wrong.
2) I need the footer to have a different background color and footer should occupy the rest of the screen once the main container ends. The footer can have a minimum height or take the height as per the content inside the footer.
.footer {
height:80px;
margin-top:-80px;
position:relative;
clear:both;
padding-top:20px;
background-color:#F4F4F4;
border-top:1px solid #ddd;
clear:both;
}
What's going on here?
JSfiddle: http://jsfiddle.net/m7dkt/13/
This should do the trick for you: http://jsfiddle.net/panchroma/ru2BD/
Instead of trying to figure out how to color the footer and have it extend to the bottom of the page, set the body color as what you need for the footer colour, then colour the content area between the header and the footer.
body {
background-color: #F4F4F4; /*same as footer color */
}
/* don't need to explicitly set footer colour now, it's set above */
/* .footer {
background-color:#F4F4F4;
} */
/* wrap page content and set the background colour */
#wrapper{
padding-top:10px;
background-color:#ECECEC;
}
Update
If I understand you correctly you also want the footer text to be aligned to the bottom of the window. See how this looks:
http://jsfiddle.net/panchroma/D7YXP/
It's a combination of the technique above with a sticky footer.
I used this trick: I hope it will be useful for you.
HTML
<div id="wrap">
<div id="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS
#clearfooter {
display: block;
height: 50px;
}
#wrap{
padding-bottom:69px;
overflow:hidden;
}
#footer{
width:100%;
height:69px;
background:#8dc63f;
overflow:hidden;
clear:both;
color:#FFF;
position:fixed;
bottom:0;
opacity:0.9;
}
Try adding the css below to your css:
html, body, #wrapper{
height:100%;
}
Related
In case of 2 divs. one is static and other is dynamic. That is one div width should be 400px (This one I call as static div as it has static width) and the other div should occupy the rest width (This one I call as dynamic div as it has dynamic width). And, the dynamic div has no fixed width and should occupy all the remaining and should float right where as static div floats on left. My main issue is while stretching the browser when the website is active, there comes the major issue. I neither want the divs to overlap or go down. I want the dynamic div's width to adjust such that the menus remain constant.
My example code:
<style type="text/css">
body{
margin:0px;
}
#wrap{
width:100%;
min-width:1000px;
}
#static{
width:400px;
float:left;
background-color:#930; /* Just to differentiate DIV */
}
#dynamic{
float:right;
background-color:#CF0; /* Just to differentiate DIV */
}
.menus{
display:inline-block;
padding-left:5px;
padding-right:5px;
width:80px;
}
</style>
<div id="wrap">
<div id="static">
Logo comes here
</div>
<div id="dynamic">
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
</div>
</div>
In the above code, menus are displayed pretty far from logo whereas I need them to be just besides logo (but shouldn't be float left.) And, the width of the dynamic div should be adjusted such that they are displayed without wasting space.
If this is out of CSS then anybody please suggest me with JS/jQuery code.
Any help is highly appreciated.
Just remove float:right from #dynamic:
JS Bin demo
To evenly distribute the menu items, do this:
#dynamic
{
background-color:#CF0; /* Just to differentiate DIV */
display:table;
width: 100%;
}
.menus
{
display:table-cell;
text-align:center;
}
JS Bin demo: http://jsbin.com/emulux/2
A third installment...
Set a percentage width on the static div like 20% and set 80% to the dynamic div:
#static
{
float:left;
background-color:#930; /* Just to differentiate DIV */
width: 20%;
}
#dynamic
{
background-color:#CF0; /* Just to differentiate DIV */
display:table;
width: 80%;
}
.menus
{
display:table-cell;
text-align:center;
}
JS Bin demo
THis should do the trick..
DEMO
#static{
width:400px;
float:left;
background-color:#930; /* Just to differentiate DIV */
display:inline; /*New Line */
}
#dynamic{
/* float:right;*/
background-color:#CF0; /* Just to differentiate DIV */
width:100%;
}
I want a footer to stay at the bottom of the page. So I created a DIV with min-heigt:100% and a DIV with no height setting for animating an ajax content loads:
HTML:
<div class="main">
<div class="header navi>…</div>
<div class="animater">
<!-- content goes here -->
<div class="footer">
<!-- footer stuff goes here -->
</div>
</div>
</div>
CSS:
.main {
min-height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
}
.header {
// height, width, margin, position
}
.animater {
// empty
}
.footer {
bottom:0px;
position:absolute;
}
When I load the page and the content is much smaller than my screen everything works perfect. The Footer is at the bottom of the screen as supposed.
I'm now animating the animater using CSS keyframes. When the out animation ends, I'm replacing the content of animater and enimate it back in again. When the content is smaller then the screen again, the footer is at the top of my animater. But when I'm reloading the page "manually" (so that the content does not get animated), the footer is positioned properly.
So I need a footer that sits at the bottom of the content whatever height the content has. I cannot give the animater min-height 'cause it is not at the top of the page.
This example I made shows the minimum css needed to get a footer to stay down. http://jsfiddle.net/meBv3/
The HTML
<div class="wrapper">
<div class="page">
page here
</div>
<div class="footer">
Content for class "footer" Goes Here
</div>
</div>
the CSS
/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */
html, body{
height:100%; /* to keep .footer on bottom */
margin:0; /* to get rid of scroll bar, because (100% + default margin = scroll) */
}
.wrapper {
min-height: 100%; /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em; /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/
}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px; /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */
}
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).