jquery - 消息布局调整为文档的高度

Question

我已经在网上搜索了很多周，但没有结果。所以我做了一个jsfiide，这是链接:http://jsfiddle.net/2etpk7mw/

我想知道的是，如何使用 Window 或 DOM 高度进行调整？我也写了一个 JScript，没有运气!欢迎任何帮助。以下是代码片段:

HTML:

<div id="messagingApp" class="clearfix">
        <div class="usersList">
            <ul>
                <li>Friend</li>
                <li>Friend</li>
                <li>Friend</li>
                <li>Friend</li>
                <li>Friend</li>
            </ul>
        </div>
        <div class="conversation">
             <ul class="_conversation">
                <li>Recieved</li>
                <li>Sent</li>
                <li>Sent</li>
                <li>Recieved</li>
                <li>Recieved</li>
            </ul>
        </div>
        <div id="replyBox">Reply from here...</div>
    </div>

CSS:

    body {
        background: none repeat scroll 0 0 #d6d6d6;
        color: #333333;
        font-family: arial,sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
        unicode-bidi: embed;
    }

    #messagingApp {
        background: none repeat scroll 0 0 #fff;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        width: 960px;
    }

    ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

    .usersList {
        border-right: 1px solid #ccc;
        float: left;
        height: 600px;
        min-height: 100%;
        width: 300px;
    }

    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }


    .conversation {
        float: right;
        width: 655px;
    }

    ._conversation > li {
        border: 1px solid #eee;
        height: 50px;
        width: 650px;
    }


    #messagingApp #replyBox {
        background: none repeat scroll 0 0 #eee;
        bottom: 0;
        float: right;
        height: 200px;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 0;
        width: 659px;
    }

我写的一个 JScript:

function setHeight() {
    windowHeight = $(document).height();
    console.log(windowHeight);
    windowHeight = windowHeight;
    console.log(windowHeight); 
}

编辑:这一切都可以通过兼容的 CSS 代码来解决，还是我必须在浏览器窗口的 Resize 事件中应用一些 jQuery 脚本？提前致谢。

这是我想要看到的插图/图形:

这是一个例子，感谢任何帮助，或者一些教程的 url。

编辑:这个问题明天将有资格获得赏金。

Answer 1

(我不确定我是否完全理解你想要实现的目标，但我没有足够的声誉来发表评论)

据我了解，您希望 #messagingApp 具有与窗口相同的高度。

使用 CSS

在 CSS 中，height: 100% 是父元素的高度。但是，默认情况下，正文将具有其内容的大小而不是窗口的大小。要解决这个问题，您需要执行以下操作:

html, body{
    height: 100%;
}

JsFiddle here

使用 JQuery

如果出于某种原因，你想使用 JS 而不是 CSS，你可以使用以下内容。

$("#messagingApp").height($( window ).height());

正如@Johannes 所说，每次用户调整窗口大小时，您都需要更改#messagingApp 的高度。所以，你还需要添加:

$(window).on("resize", function(){
    $("#messagingApp").height($( window ).height());
});

JsFiddle here