需要将可滚动 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/
上面你可以看到。我有两个 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/