呃,我希望标题没有听起来那么困惑。我会尽力解释,因为我无法发布图片:
我希望左边的 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 的宽度,而内容中心“正确地”偏向右侧。
最佳答案
您可以仅通过坐标调整您的 fixed
元素(与 absolute
元素一样多): demo
.right {
background: black;
color: white;
position:fixed;
left:200px;
right:0;
top:0;
bottom:0;
text-align: center;
}
关于html - 响应式 2 列布局,其中 1 个 div 的大小固定,另一个在页面的其余部分(高度和宽度)上延伸但不可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26962259/