html - 将 DIV 拉伸(stretch)到整个页面宽度，但也可以根据浏览器边框自动调整大小

Question

如何使此布局完全响应？基本上我需要两个盒子:

chatEntries 和 #chatUsers 将在整个页面上展开。

他们必须按以下比例共享页面宽度:85% [chatEntries] - 15% [chatUsers]。

那我该怎么做呢？

Answer 1

考虑到你插图中的边界，我会推荐这样的东西:

jsFiddle

HTML

<div class="clearfix container">
    <div class="chatEntries"></div>
    <div class="chatUsers">
        <h4>Online Users</h4> 
    </div>
</div>

CSS

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.container {
    background: #000;
    padding-top: 30px;
}
h4 {
    color: #05E9FF;
    text-align: right;
    margin: 0;
    font-size: 16px;
    font-family: arial, sans-serf;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 1;
}
.chatEntries,
.chatUsers {
    min-height: 500px;
}
.chatEntries {
    width: 84.8%;
    background: #ccc;
    float: left;
}
.chatUsers {
    position: relative;
    width: 14.8%;
    background: #999;
    float: right;
    margin-right: 0.2%;
}