SCROLL - FULL HEIGHT ELEMENT

by bizamajig

HTML

<div style="padding: 0px;">
<div class="scroll-full-height">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>

CSS

.scroll-full-height {
    background-color: green;
    color: red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

function bizamajig__set__height( target_element ) {
    var input__window_height	= $(window).height(),

        input__scroll_top		= $(window).scrollTop(),
    	input__element_offset	= $( target_element ).offset().top,
    	input__distance			= ( input__element_offset - input__scroll_top );
    
//console.log( 'input__window_height	= ', ( input__window_height ) );
//console.log( 'input__scroll_top		= ', ( input__scroll_top ) );
//console.log( 'input__element_offset	= ', ( input__element_offset ) );
//console.log( 'input__distance		= ', ( input__distance ) );
console.log( 'HEIGHT		= ', ( input__window_height - input__distance ) );
//    $( target_element ).css( 'min-height', ( input__window_height - input__distance ) );
    $( target_element ).css( 'min-height', ( input__window_height - input__distance ) );
};

bizamajig__set__height( '.scroll-full-height' );

$(window).resize( function() {
    bizamajig__set__height( '.scroll-full-height' );
});