Question

我正在尝试设置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）

Answer 1

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

尽管最小高度为0，但Div为空时其高度

1 个答案: