Smooth scroll in one div with two divs @ 100% height side by side

Looking to have 100% height on two divs side by side. I want to keep each div independent in scrolling content in each but in the blue div/column, I would like to have a smooth scroll feature. It works now but you will see the red column does not retain its 100% column height.

Thanks for any insight...

https://jsfiddle.net/o1grxdw5/12/
brihol44Asked:
Who is Participating?
 
Slick812Commented:
greetings  brihol44, ,  You can use javascript to get the display height of the blue div with -
        var hgt = $( "#bdiv" ).height();
and then set the height of the red div with -
        $( "#adiv" ).height(hgt);

$(document).ready(function (){
var hgt = $( "#bdiv" ).height();
$( "#adiv" ).height(hgt);

            $('a').click(function (){
                $('html, body').animate({
                    scrollTop: $("#sectionb").offset().top
                }, 2000);
            });
        });

Open in new window


And the red div is displayed as 100%, but because it is a FLOAT , , it uses the window height as the measure for 100%, not the container
0
 
brihol44Author Commented:
Alright! I'll check it out later tonight and see how it works. Thx
0
 
Slick812Commented:
this question has been inactive for more than 14 days and must be closed for cleanup. points awarded to solution code
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.