Question

我目前正在聊天网站上工作，在使用聊天显示时遇到了一个奇怪的问题。现在，我有一个div我的jQuery动态添加聊天行。我希望div的高度为100％，这样我就可以根据用户的配置来调整它的大小，但是当我这样做时，div会扩展而不是滚动。

我做了很多研究，但没有运气。例如，我尝试在我的CSS中强制overflow-y: scroll，将max-height设置为100％，但仍然没有运气。然而，我注意到的有趣的事情是Chrome中似乎没有出现这个问题，但在Firefox 31.0和IE 11中重现了这个问题。

这是我的HTML（修改为仅显示相关部分）：

<html height="100%">
    <link rel="stylesheet" href="./stylesheets/style.css"> <!-- Mainly background colors, etc -->
    <link rel="stylesheet" href="./stylesheets/chat.css"> <!-- Most of this page's styling comes from here -->
    <link rel="stylesheet" href="./stylesheets/buttons.css"> <!-- Reskining the bootstrap buttons -->
    <script src="./javascripts/jquery/jquery-1.7.2.min.js"></script>
    <script src="./javascripts/chat.js"></script> <!-- the js that facilitates chatting -->
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <script src="./dist/js/bootstrap.min.js"></script>
    <body style="background-color: #ccc;" height="100%" width="100%">
        <div id="pageHeader" width="100%" height="20%">
            ...
        </div>
        <table width="100%" height="70%" style="margin: 0px">
            <tr width="100%" height="70%">
                <td width="60%" height="100%">
                    <div id="msgWindow" class="shadow"></div> <!-- The is is the div I'm referring to -->
                </td>
                <td width="25%" height="100%">
                    <div id="roomWindow" class="shadow" height="100%"></div>
                </td>
                <td width="15%" height="100%">
                    ...
                </td>
            </tr>
            <tr height="15%">
                ...
            </tr>
        </table>
        <table height="10%" width="100%">
            <tr height="95%" width="100%">
                ...
            </tr>
            <tr height="5%" width="100%">
                <td><p style="color:grey">BETA 1.0</p></td>
            </tr>
        </table>
    </body>
</html>

chat.css：

#msgWindow {
  position: relative;
  background-color: #fff;
  display: inline-block;
  white-space: pre;
  overflow-y: scroll;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

h1{
    color: #3366BB;
}

#roomWindow {
  background-color: #fff;
  white-space: pre;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.shadow {
  box-shadow: 2px 2px 4px 1px #000000;
  padding-top: 10px;
  padding-right: 1px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.allMsg {
    max-width: 550px !important;
    white-space: pre-wrap;

}

.userSpan {
    font-size: 9pt;
    background-color: #FFFFCC;
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}

我在动态添加聊天行时使用的JS如下所示：

var html = "<tr><td class='userSpan'>" + msg.source + "</td><td class='allMsg'>" + msg.message + "</td>";
$('#msgWindow').append(html);

style.css不包含任何布局内容，只包含颜色和字体。

我花了很长时间看这个试图修复它，所以我必须忽略一些非常简单的东西。

提前致谢！

Answer 1

高度100％不适用于滚动条。您需要为其中一个包装器提供高度。在您的问题中，您已经提到高度来自用户配置，因此不会出现问题。您可以将配置高度设置为 td 或 #msgWindow 容器的内联css，如下所示。您可以使用PHP或Javascript作为内联

添加高度

假设此用户的配置高度= 200px

将高度添加到 td

<tr width="100%" height="70%">
    <td width="60%" style="height:200px;" >
       <div id="msgWindow" class="shadow"></div> <!-- The is is the div I'm referring to -->
    </td>
    <td width="25%" height="100%">
       <div id="roomWindow" class="shadow" height="100%"></div>
    </td>
</tr>

将高度添加到 #msgWindow

<tr width="100%" height="70%">
    <td width="60%">
       <div id="msgWindow" class="shadow" style="height:200px;" ></div> <!-- The is is the div I'm referring to -->
    </td>
    <td width="25%" height="100%">
       <div id="roomWindow" class="shadow" height="100%"></div>
    </td>
</tr>

100％高度div不会滚动

1 个答案: