[jQuery] Resizable() work incorrectly with Iframe

[jQuery] Resizable() work incorrectly with Iframe


Hi guys.
I have a problem with the resizable() function.
When its use with iframe, vertical resizing work incorrectly. Who
knows how fix it?
Here is the code:
<html>
    <head>
        <title>title</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }
            #resizeDiv {
                background: #EEE;
                width: 100%;
                height: 170px;
                border-top: 1px solid #CCC;
                position: absolute;
                bottom: 0;
                z-index: 2;
            }
            iframe {
                z-index: 1;
            }
        </style>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/ui.core.js" type="text/javascript"></script>
        <script src="js/ui.dialog.js" type="text/javascript"></script>
        <script src="js/ui.resizable.js" type="text/javascript"></script>
        <script type="text/javascript">
             $(document).ready(function(){
                    $('#resizeDiv').resizable({
                        handles: 'n'
                    });
             });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="site">
                <iframe src="http://google.com" frameborder="0" scrolling="no"
height="100%" width="100%"></iframe>
            </div>
            <div id="resizeDiv"></div>
        </div>
    </body>
</html>
Thank you