Filling the page

Design help General
21

I’m glad it’s working now and I’ll be happy to help if new problems arise :smiley: .

-Bertie.

23

Hi @bertie

I was able to get everything working. Thanks! Do you know of a way to make the Page-1, Page-2… heights resize automatically as the window is changed. I noticed this method requires the page to be refreshed for the heights to adjust. Any help is much appreciated.

Thanks again.

24

How do you mean? Would the section heights change as you scrolled down?

Bertie.

25

Make the heights adjust to the window size, while it is being resized. Check out this example,

Thanks.

26

Actually now that the sections adjust to the window height, I really just need a way to make a button stay at the bottom of a section given that the height is variable. Any ideas?

27

@inglebri

How did you get your sections adjust to the window height? I am trying to solve the same problem.

Thanks

28

How do you get your sections to stay center and adjust to the window height?

29

Enjoy.

30

Hi,
So I got the full page code to work, yet I’m still trying to figure out how to keep my elements centered and adjusted to the height of the window. Help with this would be much appreciated.

Thanks,
Jonathan

31

Math and logic. Check for the container to be centered height value, then divide it by 2 and set the margin to be 50% of the window height - the value.

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
    ch = $('.containertobecentered').height();
    nch = (vph/2)-(ch/2);
    $('.containertobecentered').css('margin',nch);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();
    ch = $('containertobecentered').height();
    $('.full-page').css('height',vph);
    nch = (vph/2)-(nch/2);
    $('.containertobecentered').css('margin',nch);
});

That should work. Haven’t tested it tough.

32

Okay. Nevermind the post above. Here is the best solution I came up with :wink:

Troubleshooting link: https://webflow.com/design/bodyheight?preview=53ed13101167543a2568b9f169bb1637
Website preview: http://bodyheight.webflow.com/

You might need to completely refresh bodyheight page since I’ve been using it before and your browser might still have it in it’s memory. SImply CTRL + Refresh or CMD + Refresh on your browser bar :wink:

<script>
$(document).ready(function() {
 vph = $(window).height();
 $('.fullpage').css('height',vph);

 ch = $('#containertobecentered').height();
 cmar = vph/2 - ch/2;
 $('.containertobecentered').css('padding-top',cmar);
 $('#info').html('Window height: ' + vph + ' px<br />Container height: ' + ch + ' px<br />Padding top: ' + cmar);
});

$(window).resize(function() {
 vph = $(window).height();
 $('.fullpage').css('height',vph);
 
 ch = $('#containertobecentered').height();
 cmar = vph/2 - ch/2;
 $('.containertobecentered').css('padding-top',cmar);
 
 $('#info').html('Window height: ' + vph + 'px<br />Container height: ' + ch + 'px<br />Padding top: ' + cmar);
});
</script>

There are some additional things like the info box. It displays current values of some things we’re using up here :wink: Hope you enjoy it :wink: