这感觉应该是可以实现的，但我找不到合适的属性组合来满足我的需求.
我有一个布局，其中包含以下内容:
- 顶部的标题栏应始终可见
- 左侧的菜单，可通过标题栏中的按钮打开/关闭
- 剩余空间(菜单右侧标题栏下方)由显示的任何内容填充(根据用户单击的菜单项，此div中会放置不同的页面/内容)
我想要的关键是，当内容需要更多的空间时，滚动条应该是用于滚动page-container内的东西，而不是整个页面(即标题栏和菜单应该显示在固定的位置).
此外，在页面内容中有一个details-panel div，我希望它总是可见的，它应该会导致它上面的内容(在本例中为page-content)缩小以适应这一点.
下面是一个代码片段，它显示了我已经到了哪里;注意，当视图小于内容时，滚动条滚动整个页面(包括标题栏和菜单项)，以及视图中不保留的detail-panel.
Here is a codepen of the same.个
document.getElementById('menu-toggle').addEventListener('click', function () {
document.getElementById('menu').classList.toggle('closed');
document.getElementById('menu-toggle').classList.toggle('closed');
});html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.5em;
margin: 0;
padding: 0;
}
#parent-container {
height: 100vh;
max-height: 100vh;
width: 100vw;
max-width: 100vw;
display: flex;
flex-direction: column;
align-items: stretch;
}
#title-bar {
background-color: blue;
color: #fff;
display: flex;
align-items: center;
flex-shrink: 0;
flex-grow: 0;
}
#menu-toggle {
cursor: pointer;
font-size: 2em;
user-select: none;
flex-shrink: 0;
padding: 10px;
transform: rotate(45deg);
transition: transform .3s ease-in;
}
#menu.closed {
max-width: 0;
transition: max-width 0.3s ease-out;
overflow: hidden;
}
#menu-toggle.closed {
transform: rotate(0);
transition: transform .3s ease-in;
}
.top-container {
display: flex;
flex-grow: 1;
}
#menu {
background-color: grey;
max-width: 200px; /* just an arbitrary bigger-than-needed value to allow transition */
transition: max-width 0.3s ease-in;
flex-shrink: 0;
flex-grow: 0;
overflow: hidden;
}
#content {
flex-shrink: 1;
flex-grow: 1;
}
.page-container {
display: flex;
flex-direction: column;
background-color: pink;
}
.page-content {
overflow-y: auto;
overflow-x: auto;
flex-grow: 1;
flex-shrink: 1;
}
.detail-panel {
background: teal;
flex-shrink: 0;
}<div id="parent-container">
<div id="title-bar">
<h1 id="menu-toggle">+</h1>
<h1>The Title</h1>
</div>
<div class="top-container">
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
</div>
<div id="content">
<div class="page-container">
The stuff in within page-container could change to anything based on whichever menu item the user selects, so everything "above" this must be fairly generic, and not dependent on the content within.
</br></br>
<div class="page-content">
This should show a scrollbar (horizontal and vertical) if required.
</br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tellus elementum sagittis vitae et leo duis. Laoreet sit amet cursus sit. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Enim eu turpis egestas pretium. Tristique senectus et netus et malesuada fames ac. Proin fermentum leo vel orci porta non pulvinar neque. Faucibus vitae aliquet nec ullamcorper sit. Non consectetur a erat nam at lectus urna duis.
Vestibulum morbi blandit cursus risus at. Aenean et tortor at risus viverra adipiscing at in tellus. Tellus molestie nunc non blandit massa. Urna id volutpat lacus laoreet non curabitur. Sem viverra aliquet eget sit amet tellus cras. Sapien faucibus et molestie ac feugiat sed lectus. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Nibh ipsum consequat nisl vel pretium. Vulputate dignissim suspendisse in est. Bibendum at varius vel pharetra vel turpis nunc eget. A scelerisque purus semper eget duis at tellus at. Venenatis tellus in metus vulputate eu scelerisque felis. Lectus vestibulum mattis ullamcorper velit. Ipsum consequat nisl vel pretium lectus quam id leo. Tempor nec feugiat nisl pretium. Maecenas sed enim ut sem viverra aliquet.
Ornare arcu odio ut sem. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Facilisis gravida neque convallis a cras. Enim diam vulputate ut pharetra sit amet. Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet nisl suscipit adipiscing bibendum est ultricies. Risus in hendrerit gravida rutrum. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quam pellentesque nec nam aliquam sem et. Gravida quis blandit turpis cursus.
Et malesuada fames ac turpis egestas. Viverra nibh cras pulvinar mattis nunc. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Viverra vitae congue eu consequat ac. Nibh praesent tristique magna sit amet purus gravida quis blandit. Enim eu turpis egestas pretium aenean pharetra magna ac. Aliquet nec ullamcorper sit amet risus nullam. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Metus dictum at tempor commodo ullamcorper. Magna ac placerat vestibulum lectus mauris. Arcu vitae elementum curabitur vitae nunc sed velit. At augue eget arcu dictum varius duis at consectetur lorem. Velit egestas dui id ornare arcu odio ut. Platea dictumst quisque sagittis purus sit amet. Vel fringilla est ullamcorper eget nulla facilisi etiam. Volutpat maecenas volutpat blandit aliquam etiam. Semper viverra nam libero justo.
Eu consequat ac felis donec. Faucibus vitae aliquet nec ullamcorper. Faucibus turpis in eu mi bibendum neque egestas congue. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Tortor at auctor urna nunc id cursus metus aliquam. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Lacus vel facilisis volutpat est velit egestas dui id. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Cras adipiscing enim eu turpis. Scelerisque varius morbi enim nunc. Pulvinar proin gravida hendrerit lectus. Laoreet sit amet cursus sit amet dictum sit amet justo. Lacinia quis vel eros donec ac odio tempor. Feugiat in ante metus dictum at tempor commodo. Purus in mollis nunc sed id.
</div>
<div class="detail-panel">
This should always be displayed at the bottom of the view.
</div>
</div>
</div>
</div>
</div>