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

【问题标题】：How to keep an element at the bottom of the page updating the height of the element above it to occupy all the space?如何保持页面底部的元素更新其上方元素的高度以占据所有空间？
【发布时间】：2014-04-12 03:19:15
【问题描述】：

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

不缩小：

然后在缩小的时候：

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

现在我的情况几乎相同，这就是我所做的：我有这个布局：

#top-bar 包含页面的标题，聊天标题是聊天框的标题，messages-chat-container 是包含所有消息的滚动的 div 和 #new-message-chat -container 包含文本区域输入。我需要它总是在底部，所以我写了这个 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 类是一个包含 #chat-head、#messages-chat-container 和 #new-message-chat-container 的类。

但它不起作用，或者更好的是，它起作用了，但 #new-message-chat-container 被剪切了，这意味着它没有全部显示，而只是一部分，我必须向下滚动才能看到它。我想在底部看到所有内容。

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

【问题讨论】：

标签： javascript jquery css resize chat

【解决方案1】：

这是一种方法，但如果您同意，它可能需要 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：

<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 -->

这是一个示例链接：http://jsfiddle.net/wk8wB/

根据 w3schools.com，box-sizing: border-box 的含义如下：

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

【讨论】：

我添加了一个小提琴作为例子。
我喜欢使用 position:absolute 或 fixed 然后推动底部的 #new-messages div 为 #messages-chat-container div 添加填充的想法。您是说这需要 CSS3，我该怎么做才能使其与旧浏览器兼容？像 IE7 还是更低？
添加：我查看了小提琴，如果您在放大页面时注意到，底部 div#bottom 覆盖了#top div 和#messages div，我该如何制作它（#底部消息）以一定的放大率阻止以在#chat div中显示至少两条消息并显示顶部栏？
@user3019105 对于包含 topbar 和 bottombar 的元素（在 fiddle 的情况下为 body），您可以设置 min-height: 350px 或其他任何值，以便放大不会覆盖所有聊天。
我已经尝试过你在小提琴中所说的，在正文中添加了 min-height: 350px 但它不起作用，也许还有另一种方法？

【解决方案2】：

我想通了。

我不得不将这两个“栏”分别放在聊天上方的div 中。

我想这就是你想要的：

http://jsfiddle.net/SWLwA/1/

（JQuery 只是为了填满聊天。）

【讨论】：