How to make this div scrollable?

Question

So in my portfolio which is at http://wrobbins.me/new if you click a portfolio piece the #headerwrap expands to the window height. A group of 'showcase' is then loaded into the #job-display. I want to disable the main page's scrolling, and have the showcase be scrollable so the information wont be cut off (as you can see is happening now). This is what I'm using to expand the #header-wrap on click.

var viewport = $(window).height();
    $('#header-wrap').animate({height: viewport}, 700, function(){
        $('#job-display').load("content.html#" + job, function(){
            $('#job-display').fadeIn(700);
            jcheck = 1;
        });
    });

In addition, when a portfolio piece is clicked on the site, the page jumps up to the top of the page and then expands the header-wrap. How would I go about stopping it from jumping?

Answer 1

To make the div scrollable you need to specify a height to #job-display. for example

$('#job-display').height(500);

To remove the page scroll ,You have specify overflow-y : scroll for html tag. You will need to make it as overflow-y : hidden