使可调整大小的图标停留在动态大小的div的底部

Question

我正在尝试使用由鼠标悬停信息填充的div。

填充到的div既可调整大小又可拖动，并且效果很好。 我的小问题是，当框弯曲时，可调整大小的图标会保留在其位置。

我想看看随着大小的增加，是否可以将可调整大小的图标保留在div的底部？

 $(".btn").mouseenter(function() { $("#thepoem").html($(this).val()); }); $(".btn").mouseleave(function() { $("#thepoem").empty(); }); $("#superresizablediv").resizable(); $("#superresizablediv").draggable(); 

 #superresizablediv { position: absolute; top: 15%; left: 5%; min-width: 250px; min-height: 50px; background-color: #5fc0e3; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; z-index: 1 } #thepoem { display: flex; display: inherit; min-height: 50px; min-width: 250px; background-color: #5fc0e3; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; } 

 <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> <button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “'Tis some visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button> <button class="btn" value="Ah, distinctly I remember it was in the bleak December; And each separate dying ember wrought its ghost upon the floor. Eagerly I wished the morrow;—vainly I had sought to borrow From my books surcease of sorrow—sorrow for the lost Lenore— For the rare and radiant maiden whom the angels name Lenore— Nameless here for evermore.">The raven verse 2</button> <div id="superresizablediv" class="ui-resizable-se"> <div id="thepoem"></div> </div> 

Answer 1

您需要在#superresizablediv上更新#superresizablediv的高度，并在mouseleave上重置高度

 var height = ''; $(".btn").mouseenter(function() { height = $("#superresizablediv").outerHeight(); $("#thepoem").html($(this).val()); $("#superresizablediv").height($("#thepoem").outerHeight()) }); $(".btn").mouseleave(function() { $("#thepoem").empty(); $("#superresizablediv").height(height) }); $("#superresizablediv").resizable(); $("#superresizablediv").draggable(); 

 #superresizablediv { position: absolute; top: 15%; left: 5%; min-width: 250px; min-height: 50px; background-color: #5fc0e3; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; z-index: 1 } #thepoem { display: flex; display: inherit; min-height: 50px; min-width: 250px; background-color: #5fc0e3; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; } 

 <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> <button class="btn" value="Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore— While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. “'Tis some visitor,” I muttered, “tapping at my chamber door— Only this and nothing more.">The raven verse 1</button> <button class="btn" value="Ah, distinctly I remember it was in the bleak December; And each separate dying ember wrought its ghost upon the floor. Eagerly I wished the morrow;—vainly I had sought to borrow From my books surcease of sorrow—sorrow for the lost Lenore— For the rare and radiant maiden whom the angels name Lenore— Nameless here for evermore.">The raven verse 2</button> <div id="superresizablediv" class="ui-resizable-se"> <div id="thepoem"></div> </div>