javascript - 转换 div 的高度以适应其内容

Question

我有一个div用于向用户显示任何信息消息。

height此 div 的首字母iszero和displayis none。当有任何消息要显示给用户时，我使用javascript.

我将它的高度过渡div到它给出了缓慢向下滑动的效果。048pxdiv

问题

由于height设置为48px，如果里面的消息很长，它不会增加它的高度以防止文本溢出。

在全尺寸浏览器窗口中显示的消息

在小浏览器窗口中显示相同的消息

问题

如何在 javascript 中设置此 div 的高度，以便调整其高度以适应其内容。

HTML

<!--used for displaying error or success message-->
<p id="info-message-block">
   <span></span>
</p>

CSS

.error-msg-block,
.success-msg-block {
  display: none;
  background: #dc3545;
  color: #fff;
  border-radius: 2px;
  height: 0;
  font-weight: 400;
  margin: 8px 0 0;
  transition: height 0.6s ease-in;
  overflow: hidden;
  font-size: 85%;
}

.error-msg-block span,
.success-msg-block span {
    display: inline-block;
    padding: 12px 0 0 20px;
}

显示此信息消息的 javascript 函数

let displayInfoMessage = function (message, messageType) {
    'use strict';
    let messageBlock = document.querySelector('#info-message-block');
    messageBlock.style.display = 'block';
    messageBlock.firstElementChild.textContent = message;

    if (messageType === 'error') {
        messageBlock.className = 'error-msg-block';
    } else {
        messageBlock.className = 'success-msg-block';
    }

    setTimeout(function () {
        messageBlock.style.height = '48px';
    }, 10);
};

标签： javascripthtmlcss

Answer 1

如上所述，这里是使用max-height代替的想法height

let displayInfoMessage = function(message, messageType) {
  'use strict';
  let messageBlock = document.querySelector('#info-message-block');
  messageBlock.style.display = 'block';
  messageBlock.firstElementChild.textContent = message;

  if (messageType === 'error') {
    messageBlock.className = 'error-msg-block';
  } else {
    messageBlock.className = 'success-msg-block';
  }

  setTimeout(function() {
    messageBlock.style.maxHeight = '120px'; /*Make this value big enough to cover the worst case*/
  }, 10);
};

displayInfoMessage("this is a very loooong loooong loooong loooong message for test")

body {
 max-width:200px;
}

.error-msg-block,
.success-msg-block {
  display: none;
  background: #dc3545;
  color: #fff;
  border-radius: 2px;
  max-height: 0;
  font-weight: 400;
  margin: 8px 0 0;
  transition: max-height 0.6s ease-in;
  overflow: hidden;
  font-size: 85%;
}

.error-msg-block span,
.success-msg-block span {
  display: inline-block;
  padding: 12px 20px;
}

<p id="info-message-block">
  <span></span>
</p>