Slider 100% height minus 100px

Design help General
1

I’m trying to set the slider height on my home to be 100% minus 100px, so i.e. if the window height is 800px, the slider will have 700px and below you’ll see the first 100px of the next div. Then, when you resize the window to 600px, the slider height will scale down to 500px and you’ll still see the first 100px of the div below.

You can see this working on apple.com
The macOS / iOS / WatchOS divs are always shown with the same height, and if you resize the window only the slider gets smaller.

Hope there’s a way to do this without crazy code :slight_smile:

2

CSS calc() Function - calc(100% - 100px);

What’s funny is I saw the same exact thing on Apple some months back and wanted to do the same thing.

1 Like
3

Thank you very much @RickK
I found a similar solution in other forum but there was other script code involved.
Using only CSS is a lot easier for me :slight_smile: Thank you!

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.