我如何拥有一个固定的右对齐容器并使用父级滚动?

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就固定了宽,当内容多时自动出滚动条

如何将内容水平居中对齐并固定在左侧?

通过滚动保持 select2 元素的固定大小?

有两个div,一个父级,一个子级,父级有滚动条,样式如何写才能让子级的div固定在顶部,不随滚动条

可水平滚动的 TableView 的右列未完全显示

如何更改 UIScrollView 中的滚动方向?