0

我做了这个解释一切的jsfiddle。

我的 JSFiddle

asd

查看向下/向上滚动时调整大小处理程序会发生什么。

我该如何改变？我可以为此添加一些 CSS 以始终固定在 div 的底部吗？

4

1 回答 1

1

html/css 结构不正确。您应该有一个父级（可调整大小的框）、一个子级（带有手柄）和一个带有内容的子级。

这应该可以解决问题：

            <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></script>

    <script type="text/javascript" >

    jQuery(document).ready(function($) {

        $("#resizable").resizable();

    });

    </script>
    <style type="text/css">
    #resizable{

            width: 250px;
            height: 200px;
            background-color: #eee;
            text-align: center;

        }

        #resizable .handles {

            width:100%;
            height:inherit;
            overflow: auto;

        }

        #resizable .handles .content {

            display:block;
            padding-left: 20px;
            padding-right: 20px;

        }
    </style>
    </head>

    <body>



        <div id="resizable">
            <div class="handles">
                <div class="content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut sagittis erat. Ut vitae dictum leo. Proin dignissim lobortis nunc, vitae suscipit ante viverra eu. Integer mauris orci, dignissim a venenatis convallis, dictum vitae leo. Nullam sapien tellus, tristique in venenatis sed, malesuada id justo. Aliquam lobortis consectetur augue, id condimentum odio bibendum sit amet. Suspendisse bibendum, urna nec luctus lobortis, ipsum risus placerat dolor, eget interdum dui mi ut neque. Nunc imperdiet pretium magna eget malesuada. Nam mattis magna in enim ultrices pharetra eu ac leo. Nullam sed purus dolor, a faucibus ipsum. Donec et sagittis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sollicitudin vehicula laoreet. Duis luctus mattis massa vehicula pulvinar. Integer dictum ultricies augue, non aliquet enim dictum ac. Etiam non mi in nisi porta pulvinar eu non dolor. Nullam et nisl eget sem auctor tincidunt vel ut metus. Vestibulum sed est quis mauris rutrum tristique. Aenean pellentesque malesuada leo non pharetra. Integer commodo, eros vel sollicitudin porta, turpis lacus accumsan magna, non imperdiet mauris mi ut lectus. Nulla eget velit purus. In et nulla mauris. Ut elementum ligula eget est gravida ut euismod tellus auctor. Cras enim velit, vulputate quis iaculis at, sagittis vel nisl. Proin sagittis est quis mi volutpat et molestie nisi pretium. Aliquam pulvinar aliquet nisl a laoreet. Suspendisse potenti. Praesent molestie mattis felis et suscipit. Curabitur vulputate est nec nunc sollicitudin ultricies. Aliquam et sapien eros, vitae molestie massa. Nullam quis pellentesque odio. Suspendisse at mauris vel massa consequat tempor sed eget nulla. Suspendisse ullamcorper, velit mattis condimentum sodales, est massa sollicitudin velit, vel laoreet turpis est ut metus. Suspendisse elementum, diam sit amet tincidunt cursus, orci erat sollicitudin neque, id varius augue nibh vitae odio. Proin congue metus id arcu congue adipiscing. Maecenas sed augue in metus placerat blandit non vel dui. Duis nec placerat justo. Maecenas metus dui, aliquet id fermentum non, fringilla mattis nibh. Donec porta pellentesque ligula, fringilla tristique justo aliquam non. Sed mi arcu, tincidunt a pulvinar eu, varius vitae ante. Donec congue egestas ipsum. Quisque feugiat, magna vel ultricies auctor, nulla velit luctus enim, sed adipiscing felis arcu vitae elit. Phasellus luctus sapien vitae tortor pulvinar vel placerat purus tincidunt. Phasellus posuere molestie purus. Donec mauris neque, bibendum nec consectetur eget, porttitor ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictums

                </div>
            </div>
        </div>
    </body>
    </html>

希望这会有所帮助，快乐的编码:)

于 2013-05-10T18:39:49.490 回答