CSS or jQuery: Make last div fill the rest of the screen height
Question
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:
3 answers
solution1
3 ACCPTED 2013-07-25 18:38:59
$(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
});
solution2
0 2013-07-25 18:38:09
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
}
});
solution3
0 2013-07-25 18:59:54
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.