Doing a hide(); causes a scroll to appear?

I'll try to add bits of the code as this project is rather large. Let me know what code may be more relevant to you.

When I do this.

$( content ).children().hide();

my grid is hidden, then I do this its back but with a blank scroll bar.

$( content ).children()show();

This is how I make my divs.

var win = document.createElement( 'div' );
        win.setAttribute( 'id', 'myWindow' + id );
        win.setAttribute( 'data-minwidth', '75' );
        win.setAttribute( 'data-minheight', '50' );
        win.setAttribute( 'class', 'box_flat' + theme + ' message' );
        win.setAttribute( 'style', 'z-index:' + id );
        win.onmousedown = function () { _iUI.swapDepthToFront( win ); }

        var bar = document.createElement( 'div' );
        bar.setAttribute( 'id', 'myBar' + id );
        bar.setAttribute( 'class', 'handle bar_' + theme );
        bar.ondblclick = function () { _iUI.fullScreenToggle( id ); }
        bar.innerHTML = '<h2 class="handle bar_"+theme >' + name + '</h2>';
        win.appendChild( bar );
        _currentWindowElementActive = win;

        var content = document.createElement( 'div' );
        content.setAttribute( 'id', 'myContent' + id )
        content.setAttribute( 'class', 'contents' )
        win.appendChild( content );

        //tab pages
        var headerTXT = document.createElement( 'div' );//grid
        headerTXT.setAttribute( 'id', 'gridLayer' + id );
        var transform = 'rotate(90deg) translate( 0px,' + ( -10 + rowHeader.visualLengthWidth() * .55 ) + 'px )';// 55 Works well
        var style = '-webkit-transform:' + transform + '; -moz-transform:' + transform + '; -o-transform:' + transform +";";
        headerTXT.innerHTML = "<font size='4' color='black'>" + header + "</font><br><table><tr><td width='20px' > <label style='" + style + "' class='rotate' id='rowHeader" + id + "' > " + "<font size='4' color='black'>" + rowHeader + "</strong></lable> </td><td>" + "<div id='myDiv" + id + "' />" + "</td><td width='15px'></td></tr><tr height='20px'></tr></table>";
        content.appendChild( headerTXT );

        var infoTxt = document.createElement( 'div' );//info
        infoTxt.setAttribute( 'id', 'infoLayer' + id );
        infoTxt.innerHTML = "";
        if ( minXnorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > Minimum Value:   <span style='color:red';>" + minXnorm + "</p>";
        if ( minYnorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > Maximum Value: <span style='color:red';>" + minYnorm + "</p>";

        if ( maxXnorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > Minimum Value: <span style='color:red';>" + maxXnorm + "</p>";
        if ( maxXnorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > Maximum Value: <span style='color:red';>" + maxYnorm + "</p>";

        if ( Xnorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > Y Normalizer:   " + Xnorm + " </p>";
        if ( Ynorm ) infoTxt.innerHTML += "<p style='color:black ;text-align: left;' > X Normalizer:   " + Ynorm + " </p>";

        if ( header ) infoTxt.innerHTML += "<p style='color:blue ;text-align: left;' > INFO:   n/a </p>";

        $( infoTxt ).hide();
        content.appendChild( infoTxt );

...

attached is a screen shot.