css - 当内容小于div的高度时，如何摆脱无用的空间，同时使用溢出：自动

Question

代码

 <p>overflow:auto</p>
 <div class="auto">This adds the scroll bar based on you content.Here only vertical scroll bar needed so that is added n visible</div>

CSS 代码

  div.auto 
 {
 background-color:#00FF00;
 width:100px;
 height:100px;
 overflow:auto;
 }

输出

当我将我的 HTML 代码更改为

更改的 HTML 代码

<p>overflow:auto</p>
 <div class="auto">content less than div height </div>

我的输出将是

新输出

所以我想使用溢出：自动属性。这样会出现一些最小高度滚动条，但是当内容小于 div 的高度时，我不想使用 div 的整个高度。高度应该等于内容的高度。请帮忙。

Answer 1

您只需更改height: 100px;为max-height: 100px;，它将自动低于内容的高度。

Answer 2

您想使用max-height而不是height.

http://tinker.io/bbf56/1

Answer 3

尝试这个，

  div.auto 
 {
 background-color:#00FF00;
 width:100px;
 max-height:100px;
 overflow:auto;
 }

已经意识到 height:auto 无论如何都是默认的，所以你可以完全删除高度。