我正在尝试创建一个模态对话框,其中头部和底部是固定的,而模态对话框内部的内容(在本例中为用户列表)可滚动...
迄今为止,我所做的最好的尝试给了我下面这张图片的结果:
我假设在看到这张图片后,我不必描述问题... 我还假设您知道解决方案应该是什么样子的... :)
但为了确保,我还是会写出来... 模态对话框需要有一个固定的标题栏(包括“编辑板块”、“板块名称”和“板块类型”),底部也需要有一个固定的页脚(保存按钮所在区域)... 唯一可滚动的是用户列表...
代码:
HTML:
<div id="addBoardModal" class="modal modal-fixed-footer">
<form class="Boards_new" autocomplete="off">
<div class="modal-header">
<h5>{{title}}</h5>
<div class="input-field">
<!--INPUT FORM-->
<div class="BoadType">
<!--RADIAL BUTTON THING-->
<div class="modal-content">
<div class="shareMembers" style="margin-top:18px;">
<div class="row">
<h5 class="left">Share</h5>
<!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
</div>
</div>
<div class="modal-footer">
<!--JSUT THIS SAVE BUTTON-->
</div>
CSS:
.modal {
@extend .z-depth-4;
display: none;
position: fixed;
left: 0;
right: 0;
background-color: #fafafa;
padding: 0;
max-height: 70%;
width: 55%;
margin: auto;
//overflow-y: auto;
border-radius: 2px;
will-change: top, opacity;
@media #{$medium-and-down} {
width: 80%; }
h1,h2,h3,h4 {
margin-top: 0; }
.modal-header{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
height: 15rem;
padding:24px;
}
.modal-header > .input-field{width:100%;}
.modal-content {
padding: 24px;
position: absolute;
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-close {cursor: pointer;}
.modal-footer {
border-radius: 0 0 2px 2px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: #fafafa;
padding: 4px 6px;
height: 56px;
width: 100%;
.btn, .btn-flat {
float: right;
margin: 6px 0;
}
}
}
如果有人能告诉我我的代码哪里出了错,或者我应该做些不同的事情,那就太好了...
注意:我正在使用Materialize框架
height
应用到了class="modal-content"
上,并且在页脚中添加了position:absolute
,但是没有任何变化... - weinde