5

I have a set of 3 elements that need to be seen on the initial screen, while the stuff in the body below those elements, needs to be below the bottom of the initial screen, but the user still needs to be able to scroll to everything after the load. The perfect example of this is the landing page on dropbox.com (when logged out).

No matter how much the user zooms out, the elements below that lines stay below it, and are not seen until the user scrolls down. I am looking for a good CSS or jQuery solution.

I have seen this but I cannot simply make those 3 elements absolute.

The best way for me to do this, would be to extend the 3rd div's height to the bottom of the initial screen, how can I do this?

EDIT: I have about 6 divs total, and I only want the first 3 to be visible while the rest must be below the initial screen bounds.

EDIT: here is a picture of the div layout: enter image description here

Community
  • 1
  • 1
Paulius Dragunas
  • 1,702
  • 3
  • 19
  • 29
  • Are the three elements beside each other, same height? or on top of each other, spanning equally the height of the initial window? – James Jul 25 '13 at 18:37
  • Dropbox inspects the current window and sets all the appropriate values to push the first div ('top') as the only item you see upon load (given the current content's own size restrictions as well). Note they are also redrawing upon window resize. – KnowHowSolutions Jul 25 '13 at 18:57

3 Answers3

3
$(document).ready(function(){
    var w = $(window).height(); //Gives height of whole window

    // then set css heights based on window height
});

More information about how the 3 divs are going to be laid out will help!

You can also do it incase they resize the window.

$(window).resize(function(){
    var w = $(window).height(); //Gives new Height of window

    //Then set css heights again
});
James
  • 1,562
  • 15
  • 23
0

Try

$(document).ready(function() {
var height = $(window).height();
$('div').css('height', height + 'px');
});

and for zoom

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
var zoomNew = document.documentElement.clientWidth / window.innerWidth;
if (zoom != zoomNew) {

    zoom = zoomNew
}
});

fiddle

Nick
  • 14,291
  • 3
  • 17
  • 19
  • This would work, except that when the user zooms out the content is visible eventually. If you take a look at the dropbox example, the content thats supposed to be below the screen consistently stays below the bounds of the page, no matter how the window is resized until the user scrolls. – Paulius Dragunas Jul 25 '13 at 19:35
  • See if my edit works. It may not be precise enough for you. You could try playing with the math it does to make the exact size of the div right for specific browsers. – Nick Jul 25 '13 at 19:45
0

You should be able to achieve this with just css but its important to define your html and body tag to be height of 100%:

<body>
  <div class="first">
    <h1>First Box</h1>
  </div>
  <div class="second">
    <h1>Second Box</h1>
  </div>
  <div class="third">
    <h1>Third Box</h1>
  </div>
</body>

Css:

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}

div {
    height: 100%;
    text-align: center;
}

.first {
    background: #ccc;
}

.second {
    background: #999
}

.third {
    background: #000
}

h1 {
    color: white;
    padding-top: 100px;
}

Jsfiddle: http://jsfiddle.net/sLANY/

jerrylow
  • 2,569
  • 1
  • 15
  • 25
  • This is really neat, however, I have about 6 divs, and the first three should be in the initial view of the screen that should be the height of the screen. Wrapping the first 3 in a wrapper and making their height 100% does not work, not does making the html and body height 100% – Paulius Dragunas Jul 25 '13 at 19:30
  • I think I understand what you're trying to capture - not 100% because I'm not sure what the blue strip represents in your diagram but I've updated the jsfiddle you can check it and see: http://jsfiddle.net/sLANY/1/ – jerrylow Jul 25 '13 at 23:05
  • I'll try this out. The blue bar is the 2nd div's background. It had to be made absolute to it can extend to the end of the screen to override unsemantic's grid system. – Paulius Dragunas Jul 26 '13 at 01:15