我正在尝试创建全屏应用程序界面。在名为“ view-with-wisdebar”的区域中应该有一个滚动区域。 “内容”区域也应滚动,以便“选项”保持不变。
我正在使用其中一个flex框后代中的视口单位来近似柔性高度。标头应为静态。主体应具有灵活的高度,内部应具有滚动区域。页脚应为静态。
问题在于内容永远不会匹配视口高度。不使用“自动溢出”元素。我以为已经做到了,但是后来我增加了一些页眉高度,页脚超出了底部!
如您所见,我希望页眉和页脚固定在顶部和底部,并且希望中间部分灵活。中间部分应包含一个固定高度的导航栏和一个灵活的视图区域。
https://jsfiddle.net/p47o5yfe/6/
-编辑:第二个链接可大致显示所需的效果
https://jsfiddle.net/p47o5yfe/8/
-编辑:我进一步简化了问题
https://jsfiddle.net/p47o5yfe/10/
.wrapper {
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
flex-shrink: 0;
}
main {}
.view-controller {}
.navbar {}
.view-with-sidebar {
display: flex;
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
height: calc(100vh - 300px);
}
.sidebar {
width: 100px;
}
.view {
width: 100%;
}
.options {
float: left;
margin-right: 10px;
}
.content {
overflow-x: auto;
}
footer {
flex-grow: 0;
flex-shrink: 0;
}
<div class="wrapper">
<header class="header">
Header
</header>
<main>
<div class="view-controller">
<div class="navbar">
Navbar
<div class="view-with-sidebar">
<div class="sidebar">
Sidebar
</div>
<div class="view">
<div class="options">
Options
</div>
<div class="content">
Content
</div>
</div>
</div>
</div>
</main>
<footer>
Footer
</footer>
</div>
最佳答案
如果只想将滚动条放在内容和选项div上(没有任何硬核),则可以执行以下操作。我没有更改您的HTML,仅使用CSS。他们都被评论为更简单的理解。希望对您有帮助。
* {
/* it is better if you use a normalize css (https://necolas.github.io/normalize.css/) instead of these rules that I added only for this example */
padding: 0;
margin: 0;
box-sizing: border-box;
/* end */
}
.wrapper,
.wrapper * {
margin: 2px;
padding: 2px;
background-color: rgba(50, 50, 50, 0.5) !important;
border: 1px solid black;
}
.wrapper {
display: flex;
flex-direction: column;
margin: 0; /* add this to remove the default scrollbar, you can remove this rule if it is not a problem for you */
height: 100vh;
}
.header {
flex-grow: 0;
flex-shrink: 0;
}
main {
flex: 1 1 auto;
overflow-y: hidden; /* add this rule to use the last level overflow-y in content & options */
}
footer {
flex-grow: 0;
flex-shrink: 0;
}
.view-controller {
display: flex; /* it is a flexbox in a flexbox in a flexbox... */
flex-direction: column;
}
.view-with-sidebar {
flex: 1 1 auto;
display: flex;
overflow-y: hidden; /* add this rule to use the last level overflow-y in content & options */
}
.sidebar {
width: 100px;
}
.view {
display: flex; /* another flexbox in a flexbox... the game continues... */
flex: 1 1 auto;
}
.options {
margin-right: 10px;
min-width: 100px; /* this is an add only to read better the options content, you can remove it */
overflow-y: auto; /* this is the real overflow with scroll bar */
}
.content {
overflow-y: auto; /* this is the real overflow with scroll bar */
flex: 1 1 auto;
}
<div class="wrapper">
<header>
Header<br>
Header
</header>
<main class="view-controller">
<div class="navbar">
Navbar<br>
Navbar
</div>
<div class="view-with-sidebar">
<div class="sidebar">
Sidebar<br>
Sidebar
</div>
<div class="view">
<div class="options">
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
Options<br>
</div>
<div class="content">
Content<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br>
</div>
</div>
</div>
</main>
<footer>
Footer<br>
Footer</footer>
</div>