Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gard Mikael Fjeldavli
19,416 PointsFooter
I have a website with a div with the class .container within the body tag. The container is set to have a min height of 100% which works nicely. Now I want the div with the class .footer to stick to the bottom of this container. I dont want it to stick though, meaning; if the content of the container fills up the page over 100% I want the footer to continue down. So I dont want to give the footer a fixed posistion. I just want it to be on the bottom of the page if the page has little or no content, and act just as the last element on the page if the page has alot of content....if that made sense...
12 Answers
Scott Evans
4,236 PointsHTML
<html><head>
<title>Bluetooth SmartHouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale =1.0, user-scalable= no">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Play" rel="stylesheet" type="text/css">
<link rel="text/javascript" href="js/jquery.js">
</head>
<body>
<div class="header">
<div class="banner_list">
<a><img class="list_btn" alt="List Icon" src="../img/list.png"></a>
</div>
<div class="banner_header">
<h1>SmartHouse</h1>
</div>
<div class="banner_profile">
<a><img id="profile_img" src="../img/user.png" alt="Profile Picture"></a>
</div>
<div class="dropdownmenu" id="dd_menu_1" style="display: none;">
<ul class="drop_down_ul">
<a href="../index.php"><li>Home</li></a>
<a href="../lights.php"><li>Lights</li></a>
<a href="../temperature.php"><li>Temperature</li></a>
</ul>
</div>
<div class="dropdownmenu dd_prof" id="dd_menu_2" style="display: none;">
<ul class="drop_down_ul">
<a href="#"><li>chris sumthin</li></a>
<a href="../settings.php"><li>Settings</li></a>
<a href="logout.php"><li>Logout</li></a>
</ul>
</div>
</div>
<!-- THE MAIN CONTAINER -->
<div class="container">
</div>
<div class="footer">
<img src="img/facebook.png">
<h2>©Copyright Capgemini 2014 All rights reserved</h2>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// Hides both menus by default
$("#dd_menu_1").hide();
$("#dd_menu_2").hide();
//METHOD FOR THE DROPDOWN MENU
//Hides menu if shown. Showes menu if hidden.
//Hides opposite menu if this one is shown
// test commit
$(".list_btn").click(function(e) {
if ($("#dd_menu_1").is(":visible")) {
$("#dd_menu_1").hide();
} else {
$("#dd_menu_1").show(150);
$("#dd_menu_2").hide();
};
e.stopPropagation(); // Stops document.onClick from beeing run
});
//Hides menu when mouse of moved to another object
$("#dd_menu_1").mouseleave(function() {
$("#dd_menu_1").hide();
});
//METHODS FOR THE PROFILE DROPDOWN MENU
//Hides menu if shown. Showes menu if hidden.
//Hides opposite menu if this one is shown
$("#profile_img").click(function(e) {
if ($("#dd_menu_2").is(":visible")) {
$("#dd_menu_2").hide();
} else {
$("#dd_menu_2").show(150);
$("#dd_menu_1").hide();
};
e.stopPropagation(); // Stops document.onClick from beeing run
});
//Hides menu when mouse of moved to another object
$("#dd_menu_2").mouseleave(function() {
$("#dd_menu_2").hide();
});
// COMMON MENU BEHAVIOR
// Hides menus if clicked anywhere else on the page.
$(document).click(function(e) {
$("#dd_menu_1").hide();
$("#dd_menu_2").hide();
e.stopPropagation();
});
</script>
</body></html>
CSS
.header {
width: 100%;
height: 80px;
position: fixed;
z-index: 30;
top: 0;
background: rgb(105,210,231);
background: -moz-linear-gradient(top, rgba(105,210,231,1) 0%, rgba(0,158,198,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(105,210,231,1)), color-stop(100%,rgba(0,158,198,1)));
background: -webkit-linear-gradient(top, rgba(105,210,231,1) 0%,rgba(0,158,198,1) 100%);
background: -o-linear-gradient(top, rgba(105,210,231,1) 0%,rgba(0,158,198,1) 100%);
background: -ms-linear-gradient(top, rgba(105,210,231,1) 0%,rgba(0,158,198,1) 100%);
background: linear-gradient(to bottom, rgba(105,210,231,1) 0%,rgba(0,158,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69d2e7', endColorstr='#009ec6',GradientType=0 );
-webkit-box-shadow: 0 3px 5px #7C7C7C;
}
.container {
overflow: scroll;
margin-top: 81px;
width: 100%;
min-height: 1000px;
border: 1px solid red;
}
.footer {
bottom: 0;
width: 100%;
height: 70px;
background-color: #F38630;
font-size: .5em;
font-family: Lato, sans-serif;
-webkit-box-shadow: 0 -3px 2px #888;
}
. Ali
9,799 PointsSorry Gard , i logged on to your site too with your details ... basically you have wrapped the whole page in container . and then the only div you have is footer. I tried it by putting a div before footer and then giving it a height of 500px. it works. you cant have only one div and ask it position itself
. Ali
9,799 PointsHi there
.container {
height : 100%;
min-height: 700px;
}
try this :) thanks . Ali
Gard Mikael Fjeldavli
19,416 Pointsok, so heres some code. This is the css for the main container. It has a bit of margin from the top because of a fixed header.
.container{
position: absolute;
overflow: scroll;
margin-top: 80px;
width: 100%;
height: calc(100% - 80px);
}
And this is the css for the footer
.footer {
bottom: 0;
width:100%;
height: 70px;
}
Scott Evans
4,236 PointsHey again Gard, ive thrown up a quick example below, try it out and let me know if it achieves what you are after.
<style>
.container{
overflow: scroll;
margin-top: 80px;
width: 100%;
min-height: calc(100% - 150px);
}
.footer {
bottom: 0;
width:100%;
height: 70px;
}
</style>
<div>
<div class='container'>
</div>
<div class='footer'>
</div>
</div>
Gard Mikael Fjeldavli
19,416 Pointsnope...doesnt make a difference. And its wierd. Cuz I can draw a border of the container to make sure it is where I want it to be, and it is. And the footer is set to 0 at the bottom, but still there is a huge gap between the footer and the bottom page.
Scott Evans
4,236 PointsDo you have a link to your example?
Gard Mikael Fjeldavli
19,416 Points...
Scott Evans
4,236 PointsNeed a password
Gard Mikael Fjeldavli
19,416 Pointschris
Gard Mikael Fjeldavli
19,416 Pointshaha...I remembered you as a chris...clearly something wrong with my short term memory
Scott Evans
4,236 PointsGive me 10 mintues or so
Scott Evans
4,236 PointsYou are best setting a height default of 1000px.
Gard Mikael Fjeldavli
19,416 PointsHmm...Ok, but that raises some questions for me. Why put the footer outside the container? And why have a fixed height? I would like my site to scale to match different heights and sizes, so I prefer to put heights and widhts in percentages when I can. I'll try your code to check if it works with the rest of my design. Thanks
Scott Evans
4,236 PointsScott Evans
4,236 PointsIt would be great if you could share your code to help us understand more what you problem is.