如何强制 div 位于视口的顶部/底部，同时不将其从文档流中取出？

Posted 2023-03-07

【中文标题】如何强制 div 位于视口的顶部/底部，同时不将其从文档流中取出？

【英文标题】：How to force a div to top/bottom of viewport while not taking it out of document flow?

【发布时间】：2021-11-30 13:42:45

【问题描述】：

我想知道如何在不破坏文档流的情况下使蓝色 div '粘'到页面的顶部和底部（因此您不能滚动超出它）（我不希望它与内容分区）。粗略版本在代码 sn-p 中。如果我在其上设置“绝对”，它会中断流程，并且内容会进入 菜单下。如果我保持相对，您可以滚动超出它（我希望它保持在顶部：0，底部：0 以实现完整的 100vh 并带有自己的滚动）。

我有什么遗漏的吗？谢谢！

* 
  box-sizing: border-box;


.main 
  display: flex;
  flex-direction: row;
  


.sideNav 
  width: 100px;
  height: 100vh;
  border: 5px solid red;


.sidePanel 
  width: 50px;
  height: 100vh;
  border: 5px solid blue;


.content 
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;

<div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

【参考方案1】：

如果不将其从文档流中删除，您真的无法做到这一点。

但如果您知道侧面板的宽度，您可以将其作为右边距应用到内容 div。

.main 
  display: flex;
  flex-direction: row;


.sideNav 
  width: 100px;
  height: 100vh;
  border: 5px solid red;


.sidePanel 
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
  position: fixed;  /* new */
  right: 0; /* new */


.content 
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
  margin-right: 50px;  /* new */


* 
  box-sizing: border-box;


body 
  margin: 0;

<div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

【讨论】：

问题是面板展开/折叠，所以我不确定如何让宽度与动画相匹配。我担心我不能这样做。该死。

用MUI设置Collapse组件的onEnter和onExit方法是不是很傻？也许设置一个child div 延伸到 100vh，而父容器始终“可见”？这有意义吗？