Question

如何将div适应mozilla firefox中的内容？

当将新元素添加到div中时，使用-moz-max-content使div适合内容不会影响动态大小。

我尝试了以下方法：

它的作用与高度相同：450px

.login-container{
   max-height: fit-content;
   height: -moz-max-content;
}

Div达到全身身高

withCss()

（1）给出了预期的结果，但自动将height设置为max-height。

（2）div正在延伸到页面底部。

基本上，我想要一个基于内部元素的动态大小的div容器。

Answer 1

-moz-*-content不适用于height

如何知道

$('textarea').on('keyup',function(){
  var text = $( this ).val().replace(/\n/g, '<br />');
  text.replace('&#10;','<br/>'); 
  $('div').html(text);
});

div{
  background-color:#00ffff;
  width: 500px;
  height: 50px;
}
div.yourfit{
  background-color:#ff00ff;
  max-width:-moz-max-content;
  max-height:-moz-max-content;
}
div.myfit{
  background-color:#ffff00;
  max-width:-moz-max-content;
  min-height: 50px;
  height:auto;
}

/*Dont care*/
textarea{
  position: fixed;
  width: 90%;
  bottom: 0;
}

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

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="myfit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="yourfit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

要在内容中使用动态高度...请仅使用此

  min-height: 50px;
  height:auto;

-moz-max-content不适用于mozilla firefox

1 个答案: