Question

chat layout

我正在尝试在浏览器窗口中构建聊天界面，我无法正确使用CSS，我尝试了大约10个小时。

单元＃1和＃3是固定的

编辑：＃3应该是一个固定的高度，例如80px;窗口高度的其余部分将由＃2使用。

中间的单元格＃2（大单元格）将包含聊天行，任何窗口调整大小都应该将滚动条放在那个上，而不是整个窗口。单元格＃2也应该对齐底部的内容，这样只有1-2行不远离窗口顶部。

我能够在单元格＃2上使用这个CSS近乎完美：

flex-direction:column;
flex-flow: row wrap;
align-content:flex-end;

但它不会在该单元格上放置滚动条，只有IE才会这样做。我认为必须有一个更清洁的方式，因为我的CSS看起来很丑，我甚至尝试过桌子。

Here is what I have now，我想这很难读懂

Answer 1

嗯，这有点老了，但你做了什么：http://jsfiddle.net/runPK/

HTML：

<div id="sidebar"></div>
<div id="primary">
    <div id="log"></div>
    <div id="composer"></div>
</div>

CSS：

#sidebar {
    width: 200px;
    height: inherit;
    float: left;
    background-color: gray;
}
#primary {
    margin-left: 200px;
    height: inherit;
}
#log {
    height: 80%;
    background-color: silver;
    overflow: auto;
}
#composer {
    height: 20%;
    background-color: darkgray;
}

版本2： 对于composer元素的固定高度，请将此CSS用于#log和#composer

#log {
    height: calc(100% - 150px);
    background-color: silver;
    overflow: auto;
}
#composer {
    height: 150px;
    background-color: darkgray;
}

http://jsfiddle.net/runPK/1/

Answer 2

使用浮动来正确布置布局。调整大小时更改的元素的高度/宽度百分比。还有一些javascript可以将文本保留在页面底部。

http://jsfiddle.net/KH45Y/

HTML：

<body>  
    <div id="left">LEFT</div>
    <div id="right">
        <div id="top">Top
            <div id="empty"></div>
            <div id="chatContent"></div>
        </div>
        <div id="bottom">
            Bottom<br/>
            <textarea id="message">Heres some default texxt.</textarea><br/>
            <button id="clickMe">Send</button>
        </div>
    </div>
</body>

CSS：

body{
    height:500px;
}
#left{
    height:100%;
    width:20%;
    background-color:blue;
    float:left;
}
#right{
    height:100%;
    width:80%;
    float:right;
}
#top{
    overflow-y:scroll;
    background-color:red;
    height:80%;
}
#bottom{
    height:20%;
    background-color:green;
    float:bottom;
}
#chatContent{
    width:100%;
};
#empty{
    width:100%;
};

JavaScript的：

$(function(){
    $('#clickMe').click(function(event){
        $('#chatContent').append($('#message').val()+"<br>");
        $('#empty').height($('#top').height()-$('#chatContent').height());
    });

});

Answer 3

这可以通过正确使用浮动来实现。

查看这个小提琴： http://jsfiddle.net/4ZqzP/1/

Clearfix信息： http://nicolasgallagher.com/micro-clearfix-hack/

HTML：

<div class="clearfix">
    <div class="item1">Item 1</div>
    <div class="item2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at magna nulla. Curabitur vulputate purus sed ligula suscipit placerat.</div>
    <div class="item3">Bottom Item</div>
</div>

CSS：

.clearfix:before,
.clearfix:after {content: ""; display: table;} 
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.item1,
.item3{
    float: left;
}

.item1{
    width: 20%;
    background-color: magenta;
    height: 600px;
}

.item2{
    width: 80%;
    height: 400px;
    background-color: lime;
    overflow-y: scroll;
    display: table-cell;
    vertical-align: bottom;
}
.item3{
    height: 200px;
    width: 80%;
    background-color: teal;
}

CSS用于对齐聊天界面的3个布局元素

3 个答案: