jQuery可调整大小的处理程序与内容一起移动？

我做了这个解释一切的jsfiddle。jQuery可调整大小的处理程序与内容一起移动？

asd

看，当你向下滚动/上会发生什么变化调整大小处理。

我该如何改变这种情况？我可以添加一些CSS来坚持始终固定在div的底部？

来源

2013-05-10 msqar

可能重复http://stackoverflow.com/questions/ 3858460/jquery-ui-resizable-with-scroll-bars） – MikeM 2013-05-10 18:29:33

无论如何这不起作用，如果你也使用可拖动的。 – msqar 2013-05-10 19:35:55

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>

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

[jQuery UI的带有滚动条可以调整大小（的

来源

2013-05-10 18:39:49

对我不起作用:( – msqar 2013-05-10 18:58:12

这对我很有用，我已经编辑了整个源代码，所以你可以有完整的例子:)请看编辑的答案;） – 2013-05-10 21:03:01

你是一个天才mariux！ THANKSS !!!!!!!!!!!!! – msqar 2013-05-13 13:43:54

jQuery可调整大小的处理程序与内容一起移动？

回答

相关问题