All geek questions in one place

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

I have a set of three elements that you need to see on the initial screen, while the material in the body below these elements should be below the bottom of the initial screen, but the user should still be able to scroll to everything after loading. A great example of this is the landing page on dropbox.com (upon logout).

No matter how much the user scales, items below these lines remain below him and are not visible until the user scrolls down. I am looking for a good CSS or jQuery solution.

I saw this one , but I can't just make these 3 elements absolute.

The best way for me to do this is to increase the third height of the div to the bottom of the initial screen, how can I do this?

EDIT: I have about 6 divs total, and I want the first 3 to be visible, and the rest should be below the initial borders of the screen.

EDIT: here is a div layout image: enter image description here

+4
source share
3 answers
$(document).ready(function(){ var w = $(window).height(); //Gives height of whole window // then set css heights based on window height });

Additional information on how the 3 divs will be arranged will help!

You can also do this to resize the window.

 $(window).resize(function(){ var w = $(window).height(); //Gives new Height of window //Then set css heights again });
+3
source

Try

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

and to scale

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

fiddle

0
source

You can achieve this only with css, but it is important to determine that your html and body tag are 100% high:

 <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/

0
source

Source: https://habr.com/ru/post/1493505/

More articles:


All Articles