html - 我想要我的容器 block 的折叠行为

Question

我花了几个小时寻找这个问题的解决方案。我发现的只是所需行为的反面。正如标题所说，我想要的是我的''容器在具有属性'position:fixed'时崩溃并且没有高度这是代码块。

<div style="position:fixed;right:0;bottom:0">
    <div style="float:left">First DIV</div>
    <div style="float:left">Second DIV</div>
</div>

谢谢

Answer 1

基于评论

i want the behavior of multiple chat block grouped in the container (like on common chat clients on facebook or other sites). The container is the block fixed on bottom right the window containings one or several chat blocks.

因此，实际上高度不会为零，但您似乎希望 div 的高度不大于其内容的总和。

如果您没有在 div 上指定高度，那么这将是固定位置 div 的默认值。

这样的东西就足够了。

.mydiv {
  background: lightblue;
  position: fixed;
  right: 0;
  bottom: 0;
}
.mydiv div {
  border-bottom: 1px solid red;
  max-width: 200px;
  background: lightgreen;
}
.mydiv div:nth-child(even) {
  background: lightgrey;
}

<div class="mydiv">
  <div>First DIV</div>
  <div>Second DIV</div>
  <div>Third loooooong DIV</div>
  <div>Fourth DIV</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam facere dolorum amet eum eos alias.</div>
</div>