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

Question

我试图在浏览器窗口中构建一个聊天界面,我无法正确使用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看起来很丑,我甚至尝试过桌子.

这就是我现在所拥有的,我想这很难读

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/