Develop Reference

Can't get fixed div to stop above the footer, what am I missing?

I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!

You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}

The height of the menu is not correct CSS

I'm working in a home page, it's working correctly, but the menu on the left sidebar, it's not making and overflow correctly. I need the scrollbars on the menu, 'cause I don't want it on the page.
I think the issue it's with the height, but I need the 100% of the height not in pixels, somebody can help me?
Here you are de JsBin: http://jsbin.com/ceyij

It is because you have only given 99% height to your html.Just make it 100%

In ceyij.css, you have given height:99% !important in html and body tag
and also give overflow:hidden so
just remove height 99% and give overflow:auto instead of hidden
it not proper look like

In order for an element to have 100% height, the parent element that wraps it must also have either a fixed or percentage height.
So with that in mind you will need 100% heights on both the HTML and BODY tags like this:
html, body
{
height:100%;
width:100%;
}
For the particular list items
#menu_panel {
height:100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
}

I've got the best result with the following thanks to jQuery
$(document).ready(function() {
// Handler for .ready() called.
var alt = $(".wrapper").height();
$(".left-side").height(alt);
$(".sidebar").height(alt - 153);
var altHeader = $("header.header").height();
$(".sidebar-menu").height(alt - 153);
});

Is there a way to find out the width of someones screen on there computer using javascript or Jquery?

I have a web site that has 4 different pages loaded, 3 are hidden and only 1 shows at any given time. When the navigation is clicked, the page switches by scrolling.
I want to fix the navigation bar horizontally in the centre of the screen.
See the general idea here
So I need a way to find the width of the window (although I don't want it to change if the user changes the width of the window. So I think I might mean screen?) so lets say var width = what I am looking for window width or screen width
And then I want to have the css:
#myDiv1 {
position:absolute;
left:0px;
top:0px;
color:#fff;
}
#myDiv2 {
position:absolute;
left: !!-- width --!! px;
top:0px;
color:#fff;
}
#myDiv3 {
position:absolute;
left: 2 * !!-- width --!! px;
top:0px;
color:#fff;
}
And then to hyperlink each of the links which is centred in the middle of the screen
#navigation{
position: fixed;
left: 0.5 * !!-- width --!! px;
}

You can get the size of the user's screen with:
screen.width
screen.height
You can find out the available size (ie. not including the taskbar)
screen.availWidth
screen.availHeight
There's a number of other useful properties there too, depending on what you need.
If it's the window's size you want, try:
window.innerWidth
window.innerHeight
Just be sure to consider if this is what you want.
<div style="width:500px;margin:0 auto;border:1px solid black">I'm in the middle!</div>

From http://www.w3schools.com/jsref/prop_screen_width.asp the screen.width variable returns the screen width.
var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;
But there are templates that will do that for you. A good place to start is to search for 'responsive web design' on Google.

yeah use
$(window).width();
you can store it in a variable and adjust the css with it.
UPDATE
check out the fiddle below, I think this is what you are looking for
var findWidth = $(window).width();
$(".container").css({"width":(findWidth*4)+"px"});
$(".section").css({"width":(findWidth)+"px"});
JSFIDDLE

May be below fiddle may help you in creating http://tragicclothing.co.uk/mitchell%20design/index.html type page :
Using JQuery:
http://jsfiddle.net/Zword/RL84x/
var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});
});

Make footer height extend to bottom of the page

I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.
I want my footers height to expand to the bottom of the page. How can I do this?
The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it.
Heres my JSFiddle: http://jsfiddle.net/5U6ZB/2/embedded/result/
<div id="header"></div>
<div id="content">
<!-- height is dynamic sometimes it will be full of divs that makes it
longer than the screen height other times it only has 1 div -->
</div>
<div id="footer">
<!-- How do I make the footer height fill up the rest of the page height? -->
</div>
body { background-color: white; }
div { width: 100%; }
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
}
#footer {
background-color: RGB(112,112,112);
/*How do I make the footer height fill up the rest of the page height?*/
}

html {
background-color:#093; /*the footer color*/
}
body {
background-color: #f6f; /*the body color*/
}

Sounds like the easiest solution in your case would be to make the body background the same colour as the footer and make your content white. This would give the illusion of the footer going all the way to the bottom.
body { background-color:RGB(112,112,112); }
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
background-color:white;
}
#footer {
background-color: RGB(112,112,112);
}

:root {
background-color: siteBackgroundColor;
}
body {
background-color: footerColor;
}
This doesn't really expand the footer, but visually expands its background color.

A similar approach to fayerth's, this will adjust height dynamically when the browser is resized (and is based on jQuery).
Instead of resizing the footer directly, I added the additional empty element <div class="flex-footer"> and resized that instead. My thought is that it should give a less jittery effect if the footer contains a bunch of elements as well as not fussing with any children of the footer that are sized relative to the parent.
Your CSS should then apply whatever background color necessary.
Note my comment about negative margins. This was necessary in my case since the design required the use of negative margins. I've included that bit in case yours does as well.
$(function(){
$(window).load(resizeFooter);
$(window).resize(resizeFooter);
});
// Dynamically resize footer to fill page, IE8 doesn't like this.
function resizeFooter() {
var windowHeight = window.innerHeight;
var headerHeight = $("header").height();
var contentHeight = $("div.main").height();
var footerHeight = $("footer").height();
// 107 references a negative margin in header - you'll need to account for this if necessary
var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107);
$(".flex-footer").css("min-height", flexFooter);
}

In pure CSS, it's not possible, but if you want to use some fancy Javascript, you can dynamically change the height of the footer to stretch the remaining height, assuming the content doesn't already do it for you.
var header = document.getElementById("header"),
content = document.getElementById("content"),
footer = document.getElementById("footer"),
height = window.screen.height - header.clientHeight - content.clientHeight;
footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px
It's usually better to follow SynXsiS's suggestion though, as it tends to give a nicer appearance. In the end, it really depends on the way you design the look and feel of your page.

very simple, and works for me :)
footer{ position:absolute; width:100%; top: (read below); }
you can try with diferent percents values in top property, when the footer take the desired place in your screen, that percent will apply to all resolutions :)

I am tweaking a wordpress theme - and have the same problem. But - if I implement a sticky footer, it actually partially scrolls away with the content. Wordpress is a mess so I'm not sure why it's doing this - but what I need is to let the footer sit below the main content, but THEN fill the rest of the screen so it doesn't look silly on shorter pages.
Any ideas of an easy CSS fix other than the color trick? (which I may do ;)
Claudia

How to set div height to 100% of user's monitor resolution?

height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.

'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}

So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}

No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}

With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');

Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}

My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});

I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.