Good day! Please explain to me the following. There is a page. When scrolling down the page. In the body of the page in the course of its viewing there is a block (slider) with a height of 100%. So the question itself is: how to make it so that when scrolling a page is a block of 100% height accounted for exactly the height of the screen, i.e. so that when you scroll down the page, it clearly "hit" the screen. As in the example of http://tass.ru/spec/crimea-energy - there, no matter how cool the page, the slider clearly becomes the height of the screen. Sorry for the pun. Hopefully explained is available, at least tried. Thank you for attention!

    2 answers 2

    CSS solutions on existing sites can be easily viewed through the web inspector. Click on the item you are interested in with the right mouse button and select "Inspect the item" or "View the item code". The web inspector opens, where you can see the layout and styles of the element. In particular, for sections from your question, the styles will be as follows:

    #arctic section.full-img-text-align { font-size: 0; height: 100vh; }

    The value of the property 100vh literally means "100% of the height of the screen." It solves the problem.

    • This property I know. No, apparently not in this case. Even if you install it, then when scrolling the block does not fall across its entire height into the screen. - LADYX
    • Can you share your code? on jsfiddle.net , for example - Vitaly Emelyantsev
    • Yes, there is actually nothing to share. The most common code, simple blocks with text, we go down (scroll the page with the mouse), and in the course of scrolling there is a block (slider) with a height of 100%. Here it is, and does not "fall" on the entire height of the screen, it becomes either slightly above the screen, or slightly below. - LADYX
    • So show this code. I'm sure 100vh works, but you don’t, then you have something wrong, and it would be great to see what it is. - Vitaly Emelyantsev
    • I apologize for the long silence, it was not possible. Here I sketched, look, please: jsfiddle.net/LADYX/a10k0682 Oh, by the way, don't pay attention to the script there - LADYX

    Jquery will help you. Use design:

     $(document).ready(function() { var winHeight = $(window).height(); var winHeightPX += "px"; $(".you_div").css("height", winHeightPX); }

    Where .you_div class of the block you need.

    • I tried to use this code. For some reason it does not work. At the same time, some scripts that I have already installed even stop working. - LADYX
    • You need to watch your layout and which scripts are connected - Dima Glazunov
    • I apologize, it was not possible. Please look at the script, the block doesn’t get on scrolling along the entire screen height: jsfiddle.net/LADYX/a10k0682 - LADYX