CODEWITHSUNDEEP
jqueryhtmlcssfrontend
Paulius Dragunas
Paulius Dragunas

Reputation: 1712

CSS or jQuery: Make last div fill the rest of the screen height

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

Upvotes: 5

Views: 5835

Answers (3)

Nick
Nick

Reputation: 15439

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

Upvotes: 0

jerrylow
jerrylow

Reputation: 2629

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/

Upvotes: 0

James
James

Reputation: 1572

$(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
});

Upvotes: 3

Related Questions