html - 响应式 2 列布局，其中 1 个 div 的大小固定，另一个在页面的其余部分(高度和宽度)上延伸但不可滚动

Question

呃，我希望标题没有听起来那么困惑。我会尽力解释，因为我无法发布图片:

我希望左边的 div 固定宽度并包含一些内容，就像通常的网站一样。正确的 div 应该响应浏览器窗口大小(拉伸(stretch)剩余宽度和完整高度)并且不可滚动。这是我尝试过的:

.left {
width: 200px;
background: grey;
float: left;
}
.right {
background: black;
color: white;
position:fixed;
left:200px;
width: 100%;
height: 100%;
text-align: center;
}

<div class="left">
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
left content, scrolling, fixed width<br>
</div>
<div class="right">
right content, fixed position,content centered, fills the 'rest' of the screen
</div>

问题是这样我无法将内容居中，因为右边的 div 占据了整个 body 的宽度，而内容中心“正确地”偏向右侧。

http://jsfiddle.net/z2keq21r/

Answer 1

您可以仅通过坐标调整您的 fixed 元素(与 absolute 元素一样多): demo

.right {
    background: black;
    color: white;
    position:fixed;
    left:200px;
    right:0;
    top:0;
    bottom:0;
    text-align: center;
}