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

Question

我正在尝试在div上工作，该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

您需要在mouseenter上更新#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>