CSS JQuery Div相对于窗口大小的起始位置

Question

I have a long single page layout. The main container div with all the content is designed to start close to the bottom of the page (white box, peeking out from the bottom just enough to see the logo, before the user has to scroll to see more).

Problem is different screen sizes and different size browsers, the main container div starts in different heights from the top, showing more or less than intended when the user first arrives.

My thought is that I will need to use js to calculate the window.height, subtract the height of the amount of the container I want to initially show, and then wrap all that in an event handler that tracks the change of browser size.

I'm a noob with Jquery however, and can't figure it out. Any examples, or tutorials available that will lead the way?

Answer 1

Made a fiddle for this: http://jsfiddle.net/QQaZp/1/

Basically, set whatever you want positioned (I just used div, but you should use #whateverID) to position absolute in your css. On load and on resize in the javascript, just set the top property to whatever the $(window).height() is (I subtracted 50px from this so it peeked up a bit)

Answer 2

If I understand correctly, you don't need JavaScript for this. Position the div absolutely 100% from the top and then set margin-top to a negative value.

CSS:

body, html {height: 100%;}

.section-1 {
    margin-top: -60px; /* Whatever value you want peeking out */
    position: absolute;
    top: 100%;
}

See a working JSFiddle here: http://jsfiddle.net/dsundy/5kt8P/1 .