Morning,
I’m using color sections to divide up my site, but am having issues getting the layout right height wise. The site is http://externalreality.co.uk and it’s the second and third sections I’m having difficulty with.
What I was hoping to do was to have each section follow on with the scroll down arrow at the bottom. However, if I use section minimum height set to ‘At least 100% of Browser Window height’, the section height is now the same as the browser window height, but shifted down by the scroll offset of the header. As a result the scroll down button is now below the bottom of the browser window. If I use ‘At least 75% of Browser Window height’ that doesn’t always work – for instance on my laptop at 1920×1080, I can see the top of the text from the next section on that setting.
Is there a way of getting the section to adjust to the height of browser window less the scroll offset?
Many thanks,
–Richard
Resolved this myself with a quick bit of jQuery in the footer. Probably not the most elegant solution, but it seems to work.
function avia_custom_resizer(){
?>
<script type="text/javascript">
jQuery(window).scroll(function(){
var view_height = jQuery(window).height() - (jQuery("#wpadminbar").height() + jQuery("#header_meta").height() + jQuery("#header_main").height());
jQuery("#av_section_2 .container").height(view_height);
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_resizer');
in functions.php, seems to do the trick.