使用FlexBox創建具有固定標題，固定側邊欄導航，固定內容的佈局

我正在使用FlexBox爲Web應用程序創建佈局。請注意，我並沒有試圖爲此使用引導程序。我只是想在普通的flexbox css中做到這一點。使用FlexBox創建具有固定標題，固定側邊欄導航，固定內容的佈局

這裏是我想要的結構：

ROW1：固定頭是64PX高。 Row2：固定sidenav，佔用左側250px，固定內容佔用右側的剩餘部分。

<div id="row1"> 
    <div class="header"></div> 
</div> 
<div id="row2"> 
    <div class="sidenav"></div> 
    <div class="main-content"></div> 
</div>

這裏的關鍵是，sidenav和主要內容都應該有自己的滾動條，屏幕的100％。實際的瀏覽器滾動條不應該水平或垂直顯示。

來源

2017-04-23 Blake Rivell

你的嘗試在哪裏，你有沒有做過什麼嘗試和解決這個問題？ –

辦法，我會讓body柔性column在100vh高度，設置#row2增長和.sidenav和.main-content

body { 
 
    height: 100vh; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#row2 { 
 
    display: flex; 
 
    flex: 1 0 0; 
 
} 
 
.header { 
 
    height: 64px; 
 
} 
 
.sidenav { 
 
    flex: 0 0 250px; 
 
} 
 
.main-content { 
 
    flex: 1 0 0; 
 
} 
 
.sidenav, .main-content { 
 
    overflow-y: scroll; 
 
}

<div id="row1"> 
 
    <div class="header">header</div> 
 
</div> 
 
<div id="row2"> 
 
    <div class="sidenav">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div> 
 
    <div class="main-content">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div> 
 
</div>

使用 overflow-y: scroll

來源

2017-04-23 15:28:17

在這個例子中，sidenav沒有它自己的滾動條。 –

@BlakeRivell你看過我的回答了嗎？我解釋說它不清楚，如果那是你想要的，該怎麼辦。儘管更新了答案。 –

好吧，我正在檢查它，我試圖得到它的工作類似於這個網站：https://material.angular.io/components/component/grid-list –

下面是使用Flexbox的

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
#row1 { 
 
    display: flex; 
 
    height: 64px; 
 
    background: red; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
#row2 { 
 
    display: flex; 
 
    top: 64px; 
 
    position: relative; 
 
    height: calc(100% - 64px); 
 
    width: 100% 
 
} 
 

 
.sidenav { 
 
    position: fixed; 
 
    width: 250px; 
 
    height: calc(100% - 64px); 
 
background: green; 
 
    overflow-y: scroll 
 
} 
 

 
.main-content { 
 
    flex: 1; 
 
    background: blue; 
 
    overflow-y: scroll 
 
}

<div id="row1"> 
 
    <div class="header"></div> 
 
</div> 
 
<div id="row2"> 
 
    <div class="sidenav">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text 
 
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text end </div> 
 
    <div class="main-content">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text 
 
    lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum 
 
    text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text </div> 
 
</div>

來源

2017-04-23 15:27:28 dippas

以防萬一我添加了'overflow：scroll'，仍然沒有得到固定的頁眉/頁腳。 – dippas

是的，側邊欄是在這種情況下，我發佈了這個問題的原因。否則，你有一切正確的。爲什麼滾動只能用於內容？ –

修復了邊欄看到更新回答 – dippas

使用FlexBox創建具有固定標題，固定側邊欄導航，固定內容的佈局

回答

相關問題