我如何拥有一个固定的右对齐容器并使用父级滚动？
Posted
技术标签:
【中文标题】我如何拥有一个固定的右对齐容器并使用父级滚动？【英文标题】：How do I have a fixed right aligned container and use the parent to scroll? 【发布时间】：2019-12-19 00:21:32 【问题描述】：我有以下设置：
全宽，100px高header
标题始终在顶部可见。
全宽，剩余高度details
details 的内容可以垂直和水平滚动
一个固定的 200 像素宽、全高的容器与 details 右对齐。
详细信息容器控制滚动，右侧有填充以说明右对齐的冻结部分。
页面正文根本不滚动，只有details 容器。
这就是我想要的样子：https://jsbin.com/mowojix/5/edit?html,css,output。但是，一旦滚动，您会注意到右对齐的容器刚刚放置到位并随着滚动移动。在这里，我在可滚动容器内有右对齐的容器，以将其保持在滚动条内。
这就是我希望它发挥作用的方式：https://jsbin.com/mowojix/7/edit?html,css,output。但是，请注意右侧的容器位于滚动条上方。在这里，我在可滚动容器之外有右对齐的容器，因此它实际上可以保持浮动在右侧。
我想我在这里遗漏了一些简单的东西。有什么想法吗？
【问题讨论】：
【参考方案1】：希望这就是您想要的。仍然依赖浏览器滚动条并修复页眉和侧边元素。
body
margin:0;
padding:0;
.header
position:fixed;
top:0;
left:0;
height:100px;
width:100vw;
background:red;
.main
margin-top:100px;
background:lightblue;
max-height:calc(100vh - 100px);
max-width:100vw;
.main-content
width:200vw;
height:200vh;
background:blue;
.side
position:fixed;
right:0;
top:100px;
background:green;
width:200px;
height:60vh;
<body>
<div class="header">
Header
</div>
<div class="main">
<section class="main-content">Main content area</section>
<section class="side">Side</section>
</div>
</body>【讨论】：
啊，很抱歉不清楚，但这不是我要找的。我需要一个固定在容器右侧的元素，而不是页面。 @bunkscene 将您的容器分成另一个 div，无论您希望它在页面中的大小如何，如果在容器中仍然正确，则添加上述解决方案。 @Mugé Position: fixed 仅相对于页面。您可以使用transform 添加一个 hack 来更改视口，但它仍然无法正常工作。以上是关于我如何拥有一个固定的右对齐容器并使用父级滚动？的主要内容，如果未能解决你的问题，请参考以下文章
多个DIV自动横向排列如何自动撑开父级DIV并出现横向滚动条？ 父级div就固定了宽，当内容多时自动出滚动条