css - 叠加调整高度到内容

Question

我正在尝试根据 div 中的内容自动调整高度。我意识到要这样做，我不应该有 height: xpx;。

我的弹出窗口是:

.popover {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  z-index: 1010;
  display: none;
  max-width: 276px;
  text-align: left;
  white-space: normal;
  background: #fff;
  padding: 10px;
  font-size: 12px;
}

当前在该弹出窗口的 div 中的是:

 span.details{
    display: block;
    font-family: Georgia,serif;
    margin: 0 0 15px 0;
    color: #888;

}

span.status{
    display: block;
    margin-bottom: 10px;
    margin-top: -7px;
}

span.status strong{
    font-size:x-small; 
    vertical-align:top;
}

span.date{
    display: inline-block;
    float: right;
    font-style: italic;
    font-weight: bold;
    font-size: 11px;
}

span.url{
    display: inline-block;
    font-style: italic;
    font-size: 12px;
    font-family: "Arial Black", Gadget, sans-serif;
    margin-right: 5px;
}

没有 height: 120px; 的样子 http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png

height: 120px; 的样子 http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png

各位有什么想法吗？我只是想让它适应盒子里的任何东西!

Answer 1

.popover {
    display:block;height:100%
}

试试这个