puh,我希望标题不会像听起来那样令人困惑。我将尽力解释,因为我无法发布图片:

我希望左侧div的宽度固定并包含一些与通常的网站类似的内容。右边的div被认为是对浏览器窗口大小的响应(在其余宽度上伸展并完全变高)并且是不可滚动的。这是我尝试过的:

.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占据了整个宽度,并且内容“正确地”居中到了右边。

http://jsfiddle.net/z2keq21r/

最佳答案

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

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

10-05 20:21
查看更多