【发布时间】：2017-12-21 00:48:12
【问题描述】：
我有一个滑出式菜单，当打开到顶部：0、底部：0、右侧：0 时，它是绝对定位的，宽度为 480 像素。它包含一些标题行的文本。在此之下，它包含一些动态创建的选项行（可以是 1 到 100 行）。在其下方是带有两个按钮的页脚行。
我想做的是：
- 将标题设为静态，使其不会滚动。
- 将按钮行设为静态，使其始终在页面底部可见
- 使带有选项的容器具有 y 滚动条，并且它的高度始终占据任何剩余可用空间（窗口高度 - 标题行的高度，减去按钮行的高度）
我正在寻找一个全 CSS 解决方案（没有 js/jquery）。我只需要支持现代浏览器（最后两个版本，即chrome，firefox）。
<body>
<div>
<div class='configuration-drawer-container configuration-drawer-container-open'>
<div class="configuration-drawer-body">
<div class="configuration-drawer-content">
<div class="title-row-wrapper">
<div class="title">
Dashboard Configuration
</div>
<div>
<p>
Select the data tiles you want displayed on the PM Dashboard.
</p>
<p>
<span>Note:</span>
Dashboard configurations are shared across all workspaces of the same type. Changes to the configuration will affect other workspaces.
</p>
<p>
Select up to five rows
</p>
</div>
</div>
<div class='data-box-row-wrapper'>
<div class="configuration-drawer-data-box-row" >
Option 1
</div>
<div class="configuration-drawer-data-box-row" >
Option 2
</div>
<div class="configuration-drawer-data-box-row" >
Option 3
</div>
<div class="configuration-drawer-data-box-row" >
Option 4
</div>
<div class="configuration-drawer-data-box-row" >
Option 5
</div>
<div class="configuration-drawer-data-box-row" >
Option 6
</div>
<div class="configuration-drawer-data-box-row" >
Option 7
</div>
<div class="configuration-drawer-data-box-row" >
Option 8
</div>
<div class="configuration-drawer-data-box-row" >
Option 9
</div>
<div class="configuration-drawer-data-box-row" >
Option 10
</div>
<div class="configuration-drawer-data-box-row" >
Option 11
</div>
<div class="configuration-drawer-data-box-row" >
Option 12
</div>
<div class="configuration-drawer-data-box-row" >
Option 13
</div>
<div class="configuration-drawer-data-box-row" >
Option 14
</div>
<div class="configuration-drawer-data-box-row" >
Option 15
</div>
<div class="configuration-drawer-data-box-row" >
Option 16
</div>
<div class="configuration-drawer-data-box-row" >
Option 17
</div>
<div class="configuration-drawer-data-box-row" >
Option 18
</div>
<div class="configuration-drawer-data-box-row" >
Option 19
</div>
<div class="configuration-drawer-data-box-row" >
Option 20
</div>
</div>
<div class="button-wrapper">
<div class="cancel" >
Close
</div>
<div class="save">
Save
</div>
</div>
</div>
</div>
</div>
</div>
</body>
body {
background-color: gray;
height: 100%;
overflow-y: hidden;
}
.configuration-drawer-container {
background-color: #fff;
bottom: 0;
color: #333;
font-size: 15px;
font-weight: 300;
height: 100vh;
padding: 24px 24px 0 24px;
position: absolute;
top: 0;
z-index: 9998;
}
.configuration-drawer-container-open {
height: 100vh;
/*overflow-y: auto;*/
visibility: visible;
width: 480px;
right: 0;
}
.configuration-drawer-body {
min-height: 100%;
position: relative;
}
.configuration-drawer-content {
position: relative;
height: 100%;
heigth: calc(100vh - 500px);
overflow: auto;
/* padding-bottom: 90px; */
}
.title-row-wrapper {
margin-bottom: 24px;
position: relative;
width: 100%;
}
.title {
color: #333;
display: inline;
font-size: 20px;
font-weight: 500;
}
.data-box-row-wrapper {
overflow-y: auto;
background-color: light-gray;
border: 1px red solid;
}
.configuration-drawer-data-box-row {
align-items: center;
border-bottom: 1px solid #eee;
cursor: pointer;
display: flex;
height: 48px;
text-align: left;
}
.button-wrapper {
padding: 24px 0;
}
.cancel {
color: #007ec2;
margin-right: 16px;
padding: 0 8px 0 8px;
border: 1px solid black;
display: inline-block;
font-size: 14px;
font-weight: 500;
height: 36px;
line-height: 36px;
min-width: 64px;
text-align: center;
vertical-align: middle;
}
.save {
color: #007ec2;
margin-right: 16px;
padding: 0 8px 0 8px;
border: 1px solid black;
display: inline-block;
font-size: 14px;
font-weight: 500;
height: 36px;
line-height: 36px;
min-width: 64px;
text-align: center;
vertical-align: middle;
}
这是我的代码笔：
【问题讨论】：
-
仅供参考，codepen 是空的
-
另外，您可以使用代码sn-p，而不是代码示例，它将在页面上呈现它
-
codepen 问题已解决。