尽管 min-height 为 0，但 Div 在空时具有高度

Posted 2023-03-06

【中文标题】尽管 min-height 为 0，但 Div 在空时具有高度

【英文标题】：Div has height when empty despite min-height being 0

【发布时间】：2019-08-27 18:22:59

【问题描述】：

我正在尝试设置 div 的样式，以便调整其高度以适应其中的文本（前提是这不超过其最大高度）。问题是当 div 内没有文字时，div 还是有一定高度的。

#container 
   width: 80%;
   margin-left: 10%;
   position: absolute;
   bottom: 0;
 

 #input 
   width: 85%;
   float: left;
 

 #submit 
   width: 15%;
   display: inline;
   float: right;
 

 #display 
    display: inline-block;
    margin: 0;
    min-height: 0;
    max-height: 200px;
    width: 100%;
    overflow: scroll;
 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="form-group">
    <label for="usr">Terminal:</label><br>
    <input type="text" class="form-control" id="input">
    <button class="btn btn-primary" id="submit">Submit</button>
    <div id="display"></div>
  </div>

我也尝试过使用height:0; max-height:200;，但是结果是一样的，当div中没有​​文字时，它仍然有高度并且没有完全消失。

（我使用的是 Bootstrap 4，以防万一）

【问题讨论】：

可以分享完整代码吗？

溢出：滚动，对吗？嗯。

您可能在 div 内有空白，甚至是换行符。

我真的只看到 overflow: scroll 是赋予 div 任何“高度”的属性；如果您将其删除或将其设置为auto，则该空间完全为空

谢谢！使用overflow: auto 而不是overflow: scroll 解决了我的问题:)

【参考方案1】：

确保padding: 0 在#display 上，并在没有overflow: auto 的情况下尝试。 也可以试试box-sizing: border-box