3

我正在为一个项目开发一个聊天模块，除了 CSS 之外，一切都在工作。我有一个用于聊天元素的全局容器，这个 div 有固定的位置。在里面我有两个 div，一个用于聊天窗口，一个用于联系人列表，聊天窗口和联系人列表都浮动到右侧，可以通过单击标题“最小化”（这会隐藏正文，只留下标题可见）。问题是，如果我只最小化其中一个 div，它会保持在顶部与另一个 div 相同的高度（见图）。

这就是我得到的：

右边的容器仍然在 div 的顶部

这就是我要的：

在此处输入图像描述

相关代码：

<body>
    <!--boring code-->

    <div class="chat_container">
        <div class="contactos show">
            <div class="titulo">contactos</div>
            <div class="container">
                <div class="contacto online" id="contacto_3">juan an orozco</div>
            </div>
        </div>
        <div class="chat_wdow_container">
            <div class="chat_wdow " id="chat_wdow_3">
                <div class="title_area">juan an orozco</div>
                <div class="container">
                    <div class="msg_area"></div>
                    <input type="text" name="msg">
                </div>
            </div>
        </div>
    </div>
</body>

和CSS

div.chat_container
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px dashed gold;
}

div.chat_container > div
{
    float: right;
}

div.chat_container div.contactos div.titulo
{
    text-align: center;
}


div.chat_container div.contactos
{
    min-width: 150px;
    background: dimgrey;
    padding: 5px;
    border-radius: 10px 10px 0 0px;
}

div.chat_container div.contactos div.container
{
    display: none;
    min-height: 145px;
    padding: 10px;
}
div.chat_container div.contactos.show div.container
{
    display: block;
}

div.chat_container div.chat_wdow
{
    margin: 0 5px;
    min-width: 190px;
    background: dimgrey;
    padding: 5px;
    border-radius: 10px 10px 0 0px;
    float: left;
}

div.chat_container div.chat_wdow div.title_area
{
    text-align: center;
}

div.chat_container div.chat_wdow div.container div.msg_area
{
    background-color: white;
    height: 120px;
    padding: 10px;
}

div.chat_container div.chat_wdow div.container
{
    display: none;
}

div.chat_container div.chat_wdow.show div.container
{
    display: block;
}

.chat_wdow input[type="text"]
{
    width: 186px;
}

要折叠窗口，我通过 mootools 切换类.show。当此类缺失时，windows 的容器区域具有display:none，当它被应用时，它具有display:block.

到目前为止我已经尝试过：

  • 将固定父级设置为高度 0 并且溢出可见
  • 将内部容器设置为相对位置，将子容器设置为绝对位置
  • 使用清除和溢出技巧
  • 将边距更改为自动值
  • 改变内部容器和子容器的垂直尺寸和最小高度
  • 将显示更改为内联和内联块
  • 将聊天容器更改为绝对，将内部容器更改为相对

我在 google 和 SO 上搜索了一段时间，但我只找到了我已经尝试过的选项，我还查看了 facebook 的聊天 css，但我找不到任何可以帮助我的东西，所以我正在寻找新的想法拉下折叠的 div。

4

1 回答 1

1

一种解决方案是使用 display:inline-block 或 display:inline 代替，然后设置 vertical-align:bottom。

例如：http: //jsbin.com/uhubeh/1/edit

但是，如果您知道两者的宽度，您也可以只使用绝对定位。

于 2013-04-28T05:06:45.967 回答