Question

我正在尝试做类似聊天的事情，它具有以下结构：

<div class="chat">
    <div id="messagesWrap" class="chat-messages">
        <table id="chat">
            <tr>
                <td>
                    A certain long text, whos length overflows the "chat" container div.
                </td>
            </tr>
            //some more <tr><td> pairs go here with JS.
        </table>
    </div>
</div>

另外，我有以下CSS：

.chat
{
    position: absolute;

    min-width: 400px;
    width: 20%;
    height: 100%;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
}

.chat-messages
{
    width: 100%;
    max-width: 100%;
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: scroll;
}

#chat
{
    height: 100%;
    max-width: 100%;
}

#chat>tbody
{
    max-width: 100%;
}

这一切的问题在于，max-width属性既不适用于table，也不适用于tbody。 td的内容使得整个结构直到表格的宽度超出最大宽度，该宽度应该是最顶部div的宽度的100％。无论我做什么，或者我尝试在谷歌搜索，我找不到解决方案。也许有一些优先级高于最大宽度的东西？

另外，我正在使用chrome。

Answer 1

max-width 属性可防止元素超过其父元素的宽度，因此您可以为表格容器 class chat-messages 设置一定的宽度并在表格中使用 max-width: 100%;。在两者中使用 max-width: 100%; 意味着它们都可以填满整个屏幕。

Answer 2

据我所知，＆＃34; max-width：100％;＆＃34;意味着宽度不能超过组件所在的整个容器。宽度可以是任何东西，占据整个容器（div或table）。这不会阻止您添加的组件的大小，从而改变容器的大小。

要解决此问题，您必须将max-width设置为实际值（就像使用min-width一样），而不是仅仅占用整个容器（可以是任何大小）。< / p>

希望这会有所帮助......

编辑：正如您在之前的评论中所说，请尝试将max-width应用于td元素而不是整个表元素。

Answer 3

您的主 div .chat 具有此属性

.chat
{
  position: absolute;
  min-width: 400px;
  **width: 20%;**
  height: 100%;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
}

您使用 width:20% 设置主要父级，这样您的表格内容就会显示很小并且不适用于 max-width:100% 类的 .chat-messages。

最大宽度：100％不工作

3 个答案: