[Tutorial] How to make hero section always fill browser window

Community resources Webflow Tips
1

If you guys/gals are wondering how to have your hero section FILL perfectly in the browser viewport no matter the height of the browser window (usually it is 800px, but some monitors are taller) like in these screenshots below:

Taller monitor or browser window:

Smaller monitor or browser window (notice the icon on the bottom sticking to the bottom):

Method #1

While CSS is typically not very adept at working with browser height (because of document vs. window heights), we can add some JavaScript to help get us there.

First, add this in your dashboard, under the </body> tag section:

<script>
  Webflow.push(function () {
    var fulls = $('.full-page');
    var win = $(window);
    Webflow.resize.on(function () {
      fulls.height(win.height());
    });
  });
</script>

Then, you’ll need to be sure and set any of the “full-page” sections to overflow:hidden, because otherwise they might show a nested scrollbar.

Finally –the tricky part– you’ll need to style your inner elements using absolute or (explicitly) relative positions. This means instead of using margins, you’ll need to set top and bottom to percentage values to achieve a vertical fluid layout.

Method #2

Here’s an attempt at building this purely in Webflow without any JS.

http://full-vert.webflow.com/

Webflow designer link here.

Few points to keep in mind:

  1. Body height must be set to 100%
  2. Section height must be 100% and the position must be set to relative.
  3. Divs within section must have an absolute position, using % units.

Thanks to @danro for these tricks!

Using "vh" unit

I know I’m late to the party, but there’s a new CSS unit called “vh” (vertical height) that might be useful. If you want to use it in Webflow, just type “50vh” into the Height field, and it should switch to use that. It seems to be supported back to IE9 (Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc).

Thanks @callmevlad for this addition.

Original forum topic:

9 Likes
2

Where are the technique tutorials? Am I missing something here?

3

It was linking to another forum topic, but i consolidated all the info into this topic.

4

There should be word that I already spoke about this on forum and found a way of doing so loooong time ago.
You can add another jQuery script under </body> in dashboard to make the content of the section appear directly in the middle. It’s pure math actually…

$(document).ready(function() {
	fsh = $('.full-page').height();
	sh = $('.section-to-be-centered').height(); // that one contains all items that you want to be centerized
	$('.section-to-be-centered').css('padding-top', fsh/2 - sh/2);
	$('.section-to-be-centered').css('padding-bottom', fsh/2 - sh/2);
});

And you don’t have to play with relative or absolute position… I’ve done this before on few pages and everything works like a charm.

I’ve done a slider before your widget and yet noone speaks about that…

1 Like
5

Hey @bartekkustra, we always appreciate your webflow tips! :beers:

One thing to keep in mind with this solution is that we must watch the browser resize event. If you look at Method #1 above, we’re purposefully hooking into the Webflow.resize listener. By doing so, we ensure that the script runs on resize, domready, and also orientationchange.

Also, just a general JavaScript tip: remember to add the var keyword before your JS variables, or they will leak into the global scope… which might cause conflicts with other scripts.

Thanks again!
-Dan

6

I always forget about the var thingy… I always add resize operator to my scripts. I just didn’t put it on forum. I create a function that is used in both document.ready and window.resize.

Sorry for the previous reply… it was a middle of the night, I was sleepy and felt simply unappreciated… you’ve added smooth scrolling few days after I published it on forum, slider 3 days after Zacchino spoke to you about what I’ve done while working on his site. And now there is a full-page section. I’m waiting for pop-up window I’m using since early beta.

Bartek

7

@bartekkustra your contribution to this forum is greatly appreciated. Not just by us but by all the people you have helped along the way. We always try to add highly desired features to Webflow so they are easily accessible and so Webflow users don’t have to write code to get the same functionality. You’re always ahead of the game when it comes to cool javascript-based widgets and functionality because it’s faster to implement it by adding code vs having a widget in our component library.

So please don’t take it personally - we’re just trying to make these things more accessible to more people.

What do you mean by pop-up windows? If we can turn that into an easy-to-follow Tips & Tricks topic (before we implement something like this directly in Webflow) I’m sure a lot of users will find it very useful.

1 Like
8

Like the one I made here: http://ateliersainthonore.com when you press “Adresse” or “Contact”. Easy to do. It’s just a block made in Webflow that is simply set with display: none. jQuery code just goes like

$(document).ready(function() {
  $('.contact-button').click(function() {
    $('.contact-popup').fadeIn();
  });
  $('.adresse-button').click(function() {
    $('.contact-popup').fadeIn();
  });
  $('.close-popup').click(function() {
    $('.contact-popup').fadeOut();
    $('.adresse-popup').fadeOut();
  });
});
2 Likes
12

Is there a “safer” way then to implement the code @bartekkustra above wrote for centering the content in the full height hero then - or is it better to just use relative/absolute positioning on each item? Also, which method is better / more reliable - Method 1 or 2?

Thanks in advance guys! :smile:

13

@jaidenraleach - I prefer method 2, simply because you can style and see everything immediately in webflow. Take note of the percentage values used in the Position controls:

https://webflow.com/design/full-vert?preview=8ec5bbeb365da8f9073cf5f7dbd74892

2880Ă—1472 852 KB

3 Likes
14

Awesome @danro thanks for the tip, seeing it in the designer is extremely helpful (and no JS is a bonus too).

15

I had been playing with VH previous to this post coming up, and it doesn’t play nice on android mobile/tablets or explorer…It’s still not 100% supported

2 Likes
16

Yea I fiddled around and noticed that too. Looks like absolute heights will have to do.

17

This is freaking awesome. I was looking for exactly this answer, hoping it had been addressed. Thanks so much for such an amazing tool!

18

Works like a charm! Thanks :smile:

1 Like
20

There seems to be an issue somewhere I dont know, but need your help.

I have integrated thesergie option 1 and this: [Code Tutorial] Full window site - #6 by bartekkustra - Webflow Tips - Forum | Webflow, I inserted an image with a width of 100% into the container. my observations.

  1. The image is not responsive with the container size when the browser window is resized.
  2. The 100% height of the container does not put into consideration the containing image so the image creates an annoying gap when looking at the different devices sizes.

Same issue too with this script here:

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').css('height',vph);
});

How can I ensure the image within the container div. “full-page” is responsive or fills the container in all media queries. Kindly resize the browser window and you will see the gap below the container. The image suppose to fill that height.

url: https://webflow.com/design/verticalmenu-sub?preview=1d6fc3749214ed69ab6a5f2c665db1a4

http://verticalmenu-sub.webflow.com

21

Instead of having an image inside the div, why don’t you have a background-image that has contain parameter? :)

22

Yes, bartekkustra that would be have been the right thing to do. But because WF doesn’t support page by page css. It would be hell after exporting the code out of WF and templating it outside WF. If there is any slight change in the website, it affects the entire css including background images and I would start the templating process all over again.

So in my little wisdom, I decided to go via this route, but I know I would need a js solution to achieve this. So that is why we call the “js ninja” to come to the rescue.