需要将可滚动 Div 放在具有相对位置的容器内,并且可滚动不应影响主 div

Need to put a scrollable Div inside a container with relative position and scrollable should not affect the main div

上面你可以看到。我有两个 div。一个是固定的,第二个是可滚动的。右侧 div 可以展开和折叠,第二个 div 将相应地调整其宽度。

现在我想放置一个 div,其大小和位置不应受到右侧 div 状态(打开或关闭)的影响,并且我想让它可滚动。添加位置绝对添加滚动到整个页面,右侧固定的 Div 不再是 100% 高度。谁能画出使用 flexbox 的基本代码结构,了解如何创建这样的流程。

谢谢

试试这个 css 代码 :D

body {
    position: relative;
}

header {
    position: fixed;
    height: header height; // put header height
    top: 0;
}

fixedLeftDiv {
    position: fixed;
    top: header height;
    left: 0;
}

scrollableDiv {
    position: fixed or absolute; // choose what you need
    top: header height; 
    left: fixedLeftDiv width;
}

有很多方法可以做到这一点,但让我们提出一个混合定位(针对 header)和使用弹性框(针对侧面板和主要区域)的方法

首先是基本的html结构

<div class='app'>
  <div class='app-header'>header content</div>
  <div class='app-content'>
    <div class='side-panel'>panel content</div>
    <div class='main-area'>area content</div>
  </div>
<div class='app>

然后一些 less/css

.app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: pink;
  display: flex;
  flex-direction: column;
}
.app-header {
  background: yellow;
}
.app-content {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  background: red;
 }
.side-panel {
  height: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  background: blue;
}
.main-area {
  min-height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  background: green;
}

在 JSFiddle 上查看它:https://jsfiddle.net/70qxu4L3/