个人中心
gpt4 book ai didi

jquery - 100% 高度 div 不会滚动

转载 作者：行者123 更新时间：2023-11-28 01:42:29 24 4
gpt4 key购买 nike

我目前在一个聊天网站上工作，在使用聊天显示时遇到一个奇怪的问题。现在，我有一个 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>

聊天.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 不包含任何布局内容，仅包含颜色和字体。

我花了太长时间研究这个试图修复它，所以我一定是忽略了一些非常简单的事情。

提前致谢!

最佳答案

高度 100% 不适用于卷轴。您需要给其中一个 wrapper 一个高度。在您的问题中，您提到高度来自用户配置，因此不会有问题。您可以将配置高度作为 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>

关于jquery - 100% 高度 div 不会滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25049624/

24 4 0
文章推荐： html - Shiny 的应用程序 - 单击新选项卡后，该选项卡仍由浏览器选中
文章推荐： javascript - 如何停止在 div 中换行字符？或者
文章推荐： javascript - jQuery Append 删除标签
文章推荐： c++ - QT请求 "QObject::connect: No such slot BackEnd::RequestReceived"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com