How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.
You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony
I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.
You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.
Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)
No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)
Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.
If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>
Related
Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}
If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.
I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black
You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.
Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>
If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.
I have the following HTML.
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.
My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?
Please note that I am using Bootstrap 3.
It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.
Demo here!
You can use the viewport percentage. See this fiddle
Relevant lines:
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:
body
{
padding:0px;
margin:0px;
}
See support here.
See this answer for more details.
For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.
I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.
The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.
This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.
Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.
I suppose I'll post this, since it seems to work:
div#header-div {
height: 90px;
background-color: lime;
margin: 0;
}
div#fixed-div {
position: fixed;
left: 0;
top: 0; /* <<< No offset */
bottom: 0; /* <<< Pull to the bottom for height */
margin: 120px 0 0; /* <<< Give it the 120px top */
width: 260px;
background-color: silver;
overflow-y: scroll;
}
http://jsbin.com/iqibew/13/
if you want your div to be sized as you like , i have an option for you
//Add this to <head> section , i thought you haven't one in the sample
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
function _resizeTDiv()
{
var p = $("#header-div");
var position = p.position();
var realheight = p.position().top+p.height();
$("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
_resizeTDiv();
//Resize our div on window resize?
$(window).resize(function() {
_resizeTDiv();
});
});
</script>
please see this site in firefox:
http://www.imageworkz.asia/microtel
the footer does not stick at the bottom of the page like how it is with stackoverflow's footer. I tried several techniques as shown in some reference sites but still, no luck.
I need some css experts out there to help me out with this. Thank you!
There are mare ways to make sticky footers. A basic trick for a footer with fixed height
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 150px; /* .push must be the same height as .footer */
}
or
you can check this post (and many others) with the title "sticky footer"
add position:fixed; bottom:0; left:0 to footer and it will fix it in place. If you then add #container {padding-bottom:120px} (or something around that amount) your content won't be hidden by the footer when viewing the bottom of the page
Make it fixed position with bottom 0 value:
footer {
position: fixed;
bottom: 0;
}
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>
How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
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 */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page