上面你可以看到。我有兩個div。一個是固定的，第二個是可滾動的。右側的 div 可以展開和折疊，第二個 div 會相應地調整其寬度。
現在我想放置一個大小和位置不受右側 div 狀態（打開或關閉）影響的 div，并且我想讓它可滾動。添加絕對位置添加滾動到整個頁面，右側的固定 Div 不再是 100% 高度。有人可以使用 flexbox 繪制基本代碼結構，以了解如何創建這樣的流程。
謝謝
uj5u.com熱心網友回復：
試試這個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;
}
uj5u.com熱心網友回復：
有很多方法可以做到這一點，但讓我們提出一種混合定位（用于標題）和使用彈性框（用于側面板和主要區域）的方法
首先是一個基本的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>
然后少一些/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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408306.html
標籤：