使用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创建具有固定标题，固定侧边栏导航，固定内容的布局

回答

相关问题