添加子元素時如何增加元素的高度？

隨著黃色孩子的成長，綠色父母如何改變他的身高？如果用戶輸入非常高，黃色孩子會增加他的高度以包含所有文本，但綠色父母的高度保持不變。我希望綠色父母的大小向下增加。我希望父母的身高與孩子的身高成正比，如果孩子矮，父母應該小，如果孩子高，父母應該高。

$(document).ready(function() {
  $("#send-btn").on('click', function() {
    $value = $("#input-user").val();

    $replyMsg = '  <div class ="user-inbox"><div class ="reply"><p>'   $value   '</p> </div> </div>';

    $(".main-content").append($replyMsg);
    $("#input-user").val("");
  })
});

.main-content {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.user-input {
  position: absolute;
  bottom: 0;
}

.instant-msg {
  position: relative;
  top: 0;
  left: 5%;
  width: 50%;
  height: 20%;
  background: cyan;
  word-break: break-all;
}

.user-inbox {
  position: relative;
  left: 45%;
  width: 100px;
  height: auto;
  width: 50%;
  height: 100px;
  background: green;
}

.reply {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 80%;
  height: auto;
  min-height: 20%;
  border-radius: 25px;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100%;
  padding: 5%;
  word-break: break-all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-content">
  <div class="instant-msg">
    <p>Hello</p>
  </div>

  <div class="user-input">
    <input id="input-user" type="text" placeholder="Type something..." required>
    <button id="send-btn">Send</button>
  </div>
</div>

uj5u.com熱心網友回復：

我通過使外部元素成為 flex 列并洗掉所有絕對定位來簡化您的布局。我還將附加目標縮小到內部容器，并洗掉了幾個冗余和嚴格的尺寸樣式。您不應該在靈活元素上設定固定高度。

$(document).ready(function() {
  $("#send-btn").on('click', function() {
    $value = $("#input-user").val();

    $replyMsg = '  <div class ="user-inbox"><div class ="reply"><p>'   $value   '</p> </div> </div>';

    $("#inbox").append($replyMsg);
    $("#input-user").val("");
  })
});

.main-content {
  width: 300px;
  min-height: 150px;
  background: red;
  display: flex;
  flex-direction: column;
}

.instant-msg {
  margin-left: 5%;
  width: 50%;
  background: cyan;
  word-break: break-all;
}

.user-inbox {
  margin-left: 45%;
  width: 50%;
  background: green;
}

.reply {
  margin-bottom: 10%;
  margin-left: 10%;
  width: 80%;
  height: auto;
  min-height: 20%;
  border-radius: 25px;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100%;
  padding: 5%;
  word-break: break-all;
}

.flex-auto {
  flex: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-content">
  <div class="instant-msg">
    <p>Hello</p>
  </div>

  <div id="inbox" class="flex-auto"></div>

  <div class="user-input">
    <input id="input-user" type="text" placeholder="Type something..." required="">
    <button id="send-btn">Send</button>
  </div>
</div>

uj5u.com熱心網友回復：

這只是一個 CSS 布局問題而已。您只需要更改幾個 CSS。請檢查一下。在主要內容中。我使用了 min-height 而不是 height，并且在 Instant-msg 中，我給出了靜態 px 大小而不是 % 值。

.main-content {
    position: relative;
    width: 300px;
    min-height: 300px;
    background: red;
    padding-bottom: 26px;
}

.instant-msg {
  position: relative;
  top: 0;
  left: 5%;
  width: 50%;
  height: 60px;
  background: cyan;
  word-break: break-all;
}

標籤：javascript html jQuery css

上一篇：用javascript更新foreach回圈中的陣列物件

下一篇：如何按資料型別映射和分組陣列資料？