Javascript 如何保持页面底部的元素更新其上方元素的高度以占据所有空间？

您好，我需要为聊天窗口创建一个布局，基本上与Facebook消息页面上的一样：聊天输入文本区域框位于窗口底部，消息的滚动内容占据了所有可用空间，请看以下图片：

无需缩小：

然后缩小时：

聊天输入文本区域始终位于底部，并且包含消息的滚动div的高度会发生变化，即使我按F12键并出现控制台：

现在我的情况几乎是一样的，这就是我所做的： 我有这样的布局：

#顶部栏包含页面的标题，聊天头是聊天盒的标题，messages chat container是包含所有消息的滚动条的div，#new message chat container包含textarea输入。我需要它总是在底部，所以我写了这个JQuery：

$(function () {
    $(window).resize(function(){
            adjustHeight();
    });

    setTimeout(function() {
            adjustHeight();
    }, 500); 
 });

 function adjustHeight() {
    var header = $("$top-bar");

    var headerHeight = getJQElementHeight(header);
    $(".content").height($(window).height() - headerHeight);

    $("#messages-chat-container").height(getJQElementHeight($(".content")) - getJQElementHeight($("#new-message-chat-container")) );

}

  function getJQElementHeight (selector) {
    return selector.outerHeight(true);
  }

.content类是一个封装了#聊天头、#消息聊天容器和#新消息聊天容器的类

但是它不起作用，或者更好，它起作用了，但是新的消息聊天容器被剪切了，这意味着它不是全部显示的，只是一部分，我必须向下滚动才能看到全部内容。我希望看到它的全部，而不是在底部

---

我错过了什么？是否有一个指南或其他东西可以很好地解释这项技术？

这里有一种方法，但如果您同意的话，它可能需要CSS3：

div#top, div#new-message
{
    position: fixed; // or absolute (it depends)
    width: 100%;
    box-sizing: border-box; // this is the css3 bit
    // you need this if you have extra padding and borders and margins
}

div#top
{
    top: 0;
    left: 0;
    height: 80px;
}

div#new-message
{
    bottom: 0;
    left: 0;
    height: 120px;
}

div#chat-messages
{
    padding-top: 80px; // height of the bar on the top
    padding-bottom: 120px; // height of the bar on the bottom
    width: 100%;
}

HTML:

下面是一个示例链接：

根据w3schools.com，以下是框大小：边框框的含义：

此图元上指定的宽度和高度（以及最小/最大属性）决定了图元的边框框。也就是说，元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去各边的边框和填充宽度来计算的

我不得不把两个“条”分别放在聊天室上方的

div

中

我想这就是你想要的：

---

（JQuery只是用来填充聊天。）

我添加了一个提琴作为例子。我喜欢使用position:absolute或fixed，然后按下底部的#new messages div，在#messages chat container div中添加一个填充。你是说这需要CSS3，我该怎么做才能使它与旧浏览器兼容？像IE7或更少？补充道：我看了小提琴，如果你注意到当你放大页面时，底部的div#bottom覆盖了#top div和#messages div，我怎么做（#bottom message）要在某个放大位置进行阻止，以便在#chat div中显示至少两条消息，并显示包含顶栏和底栏的元素的顶栏？@user3019105（在小提琴的

body

），您可以设置

最小高度：350px

或任何值，我试过你在小提琴上说的话，在身体上增加了最小高度：350px，但是没有用，也许还有别的方法？

<div id="chat-messages"></div>

<div id="top"></div> <!-- These two are to be above the chat -->
<div id="new-message"></div> <!-- You might want to set a z-index -->