Question

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

此div的初始height为zero，display为none。当有任何消息要显示给用户时，我会使用javascript显示它。

我将此div的高度从0转换为48px，这会使div的效果缓慢滑落。

问题

由于此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);
};

Answer 1

如上所述，此处使用max-height代替height

＆＃13;

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")

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

只需说出messageBlock.style.height = 'auto'，而不是设置固定值。

如果自动高度错误，请使用填充进行调整。

如果要限制可能的高度，请在样式表中设置max-height。

添加此答案，因为似乎使用auto的可能性是这里真正缺失的部分，并且使用max-height只是在解决这方面缺乏知识。

转换div的高度以适合其内容

2 个答案: