具有固定页眉和页脚以及可滚动内容的模态对话框

Question

我正在尝试创建一个具有固定页眉和页脚的模态对话框，并且模态对话框中的内容（在本例中为用户列表）是可滚动的...

到目前为止，我的最佳尝试给了我图像上的结果：

我假设在看到图像后，我不必描述问题是什么......而且我还假设你会知道解决方案的样子...... :)

但是为了确保我无论如何都会写它......模态对话框需要有一个固定的标题（标题“编辑板”“板名称”和“板类型”所在的区域）和页脚（区域“保存”按钮位于）必须固定/不可滚动......唯一必须滚动的是用户列表......

代码：

网址：

<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;
}
}
}

因此，如果有人能告诉我我在代码中做错了什么，或者我是否应该做一些不同的事情那会很好......

我用这些例子来编码这个......示例1和示例2

注意：我正在使用 Materialise 框架

Answer 1

您可以使用calc()函数尝试max-height ，例如：

.modal-content {
  height: auto !important;
  max-height: calc(100vh - 340px) !important;
}

看看下面的片段（使用全屏）：

 $(document).ready(function(){ // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered $('.modal-trigger').leanModal(); });

 .modal { overflow: hidden; } .modal-header { padding: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .modal-header h4 { margin: 0; } .modal-content { height: auto !important; max-height: calc(100vh - 340px) !important; } .content-row { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; } .content-row:last-child { border-bottom: none; } .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #33b5e5; color: #fff; } .name { padding: 0 10px; } .role { padding: 0 10px; flex: 1; text-align: right; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/> <!-- Modal Trigger --> <a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a> <!-- Modal Structure --> <div id="modal1" class="modal modal-fixed-footer"> <div class="modal-header"> <h4>Modal Header</h4> </div> <div class="modal-content"> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> <div class="content-row"> <div class="icon">1</div> <div class="name">Name</div> <div class="role">Role</div> </div> </div> <div class="modal-footer"> <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

希望这可以帮助！

Answer 2

试试这个，它应该可以工作：

<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" style="height:150px;overflow:scroll"> 
            <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">
        <!--JUST THIS SAVE BUTTON-->
      </div>

Answer 3

你看起来像这样？？ 如果没有，请在 fiddler 中更新您的代码，我会做些什么？

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" style="height:300px;overflow:scroll"> <p>Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Answer 4

我还没有使用 Materialise 的第 1 版对其进行测试，但这是我正在使用的：

.modal-header {
    padding: 14px;
    text-align: center;
    position: sticky;
}
.modal.modal-fixed-footer.with-header .modal-content {
    height: calc(88% - 56px) !important;
    padding: 23px !important;
}

只需将with-header的类添加到模态并在 '.modal-content' 上方添加一个 div，如下所示：

<div id="modal1" class="modal modal-fixed-footer with-header">

    <div class="modal-header">
      <h1>Modal Header</h1>
    </div>

    <div class="modal-content">
      <p>Scrollable content</p>
    </div>

    <div class="modal-footer" style="text-align: center">

      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
</div>

填充覆盖消除了更改 .modal-header 背景时出现的像素宽间隙。

Answer 5

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

这对我有用

谢谢