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;
}