CSS：使用左列流体（填充所有剩余空间）和右列固定（200px）进行两列布局

Question

我想这样做，以便在线用户div始终保持200px的大小，而它左边的聊天窗口调整为可以占用所有可用空间的最大大小。

因此，当窗口调整大小时 - 聊天窗口将缩小，但在线用户窗口保持在200px，有点像液体布局。

left div（聊天窗口）是：entry_window

右div（在线用户）是：online_window

#entry_window{
    border: 2px solid #D4D4D4;
    float: left;
    width: 75%;
    height: 100%;
    margin: 1%;
    overflow: scroll;
    overflow-x: hidden;
}
#online_window{

    border: 2px solid #D4D4D4;
    margin: 1%;
    margin-left: 0%;
    display: inline-block;  float: left;
    background-color: white;
    width: 21.5%;
    height: 100%;
}

哦，顺便说一句：对于垂直尺寸，我做了这个功能，使它尽可能大，而不会打扰底部。

function autoscale(){
    var v = window.innerHeight - 170;
    document.getElementById("entry_window").style.height= v+"px";
    document.getElementById("online_window").style.height= v+"px";
}

Answer 1

这可以完全不用javascript完成。您可以使用绝对定位以及定义上/左/下/右和宽度。

示例：

<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>

和

#lefty {
    position: absolute;
    background-color: blue;    
    top: 0;
    bottom: 0;
    left: 0;
    right: 200px;
}

#righty {
    position: absolute;
    background-color: red;
    top: 0;
    bottom: 0;
    width: 200px;
    right: 0;
}

见这个jsfiddle：

http://jsfiddle.net/Lyp96yqq/

Answer 2

使用display:table和table-cell，您可以这样做：

*{margin:0;padding:0}

.parent {
    width:100%;
    display:table;
}
.parent > div {
    height:200px;
    line-height:200px;
    background:orange;
    display:table-cell;
}
.parent .fixed {
    width:200px;
}
.parent .flexible {
    background:red;
}

<div class="parent">
  <div class="fixed">Fixed Width</div>
  <div class="flexible">Chat Room</div>
</div>

这里也是Jsfiddle上的例子。

Answer 3

使用css calc功能可以轻松完成此操作。但是，这取决于您要支持的浏览器。看看这个link，看看它与之兼容。

基本上，只需这样做：

#entry_window{
    border: 2px solid #D4D4D4;
    float: left;
    width: calc(100% - 208px);
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    background-color:red;
}
#online_window{
    border: 2px solid #D4D4D4;
    margin-left: 0%;
    display: inline-block;  
    float: left;
    background-color: white;
    width: 200px;
    height: 100%;
}

注意：您需要-208考虑边框。另外，请查看jsfiddle