消息布局调整到文档的高度

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脚本？先谢谢。

这是我想要的，请看这个插图/图：

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

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

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