Question

我想为一个基本的聊天应用程序完成一个看似简单的div布局，并且已经尝试过多个东西，但是没有一个适用于这个布局。

以下是这个想法： chat layout

虽然红底文本输入部分和右侧用户列表部分应固定在其位置且固定大小，但中心蓝色内容部分应填充剩余空间。

如果需要，内容部分和用户列表部分应垂直滚动（绿色）其内容，但整个网站不应该有滚动条。

非常重要：整个网站应自动填充浏览器窗口的大小。

它基本上归结为混合了“填充剩余空间”和“固定大小”的列和行，这在我通常编写的环境（XAML）中很容易实现。

使用与旧浏览器甚至Javascript不兼容的功能作为（非常）最后的手段是可以接受的。 但我不想使用表格。

编辑：这是我目前的代码。目前我只是试图为内容和输入区域解决这个问题。这导致输入区域（正确地）始终位于底部，但是内容区域仍然占据输入区域“后面”的整个高度。（在messageContainer上设置overflow和height而不是在outerContainer上没有帮助。）

<div id="outerContainer">
    <div id="messageContainer">
        <ul id="messageList"></ul>
    </div>

    <div id="inputContainer">
        <input type="text" id="msg"/>
        <button class="btn" id="broadcast">send</button>
    </div>
</div>

和

body
{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#outerContainer
{
    text-align: center;
    margin-left: 32px;
    margin-right: 0px;
    overflow:auto;
    height: 100%;
}

#messageContainer
{
    text-align: left;
    margin-top: 32px;
    margin-bottom: 72px;
}

#inputContainer
{
    position:fixed;
    bottom:0px;
    margin-bottom: 32px;
    margin-left: 0px;
    margin-right: 32px;
    width: 100%;
}

有什么想法吗？

谢谢！安德烈

Answer 1

DEMO

HTML：

<div id="wrapper">
    <div id="upperPanel">
        <div id="chat">
            <ul>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
                <li>
                    <span>Name:</span>
                    <span>tessadsda da das asd ad </span>
                </li>
            </ul>
        </div>
        <div id="friends">
            <ul>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
                <li>
                    <span>fRIEND:</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="bottomPanel">
        <textarea>
        </textarea>
        <input type="submit" value="send" />
    </div>
</div>

CSS：

html,body{
    width:100%;
    height:100%;
}

body{
    position:relative;
}

#wrapper{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border:1px solid #333;      
}

#upperPanel{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:100px;
}

#chat{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:200px; 
    background:#666;  
    overflow:auto;    
}

#friends{
    position: absolute;
    top:0;
    bottom:0;
    width:200px;
    right:0; 
    background:#999; 
    overflow:auto;   
}

#friends ul{
    text-align:right;
}

#bottomPanel{
    height: 100px;
    background:#EEE;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

#bottomPanel textarea{
    position:absolute;
    top:10px;
    bottom:10px;
    left:10px;
    right:120px; 
    resize: none;
}

#bottomPanel input[type=submit]{
    position:absolute;
    top:10px;
    bottom:10px;
     right:10px;
    width:100px;
}

Answer 2

这样的事情怎么样？

<style type="text/css">
#left {
    height: 1px;
}
#left div {
    border: 1px solid blue;
    height: 100%;
    overflow: auto;
}

#right {
    width: 100px;
}
#right div {
    border: 1px solid red;
    height: 200px;
    overflow: auto;
}

#bottom div {
    border: 1px solid red;
    width: 400px;
    height: 100px;
}
</style>

<table>
    <tr>
        <td id="left">
            <div>
                asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
            </div>
        </td>
        <td id="right">
            <div>
                asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
            </div>
        </td>
    </tr>
    <tr>
        <td id="bottom" colspan="2">
            <div></div>
        </td>
    </tr>
</table>

编辑：由于表格不行，这是另一种解决方案（Javascript）。使用jQuery，脚本非常简单（没有jQuery也不是很难，但是jQuery会破坏我，所以这就是我得到的）。想不出任何其他不使用Javascript的解决方案。

<style type="text/css">

#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
}

#left {
    border: 1px solid blue;
    overflow: auto;
}

#right {
    border: 1px solid red;
    overflow: auto;
    width: 100px;
}

#bottom {
    border: 1px solid red;
    height: 100px;
    width: 100%;
}
</style>

<div id="wrapper">

    <div id="left">lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd</div>

    <div id="right">
        asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />
    </div>

    <div id="bottom">bottom</div>

</div>

<script>
    $(function(){
        var updateLayout = function() {
            $('#left').css({
                position: 'absolute',
                top: 0,
                left: 0,
                width: $('#wrapper').innerWidth() - $('#right').outerWidth(),
                height: $('#wrapper').innerHeight() - $('#bottom').outerHeight()
            });
            $('#right').css({
                position: 'absolute',
                top: 0,
                left: $('#left').outerWidth(),
                height: $('#wrapper').innerHeight() - $('#bottom').outerHeight()
            });
            $('#bottom').css({
                position: 'absolute',
                top: $('#left').outerHeight(),
                left: 0
            });
        };

        updateLayout();

        $(window).resize(function() {
            updateLayout();
        });
    });
</script>

Answer 3

看看这个，看看你是否喜欢它。这个概念通过定位固定在底部。 Fiddle

聊天应用的简单CSS布局

3 个答案: