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

Posted 2023-02-22

【中文标题】具有固定页眉和页脚以及可滚动内容的模态对话框

【英文标题】：Modal dialog with fixed header and footer and scrollable content

【发布时间】：2017-05-09 04:57:17

【问题描述】：

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

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

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

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

代码：

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-fieldwidth: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;

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

我使用这些示例来编写代码...Example no.1 & Example no.2

注意：我正在使用 Materialize 框架

【问题讨论】：

简单看一下，您的 html 似乎格式不正确。如果你设法把它说对了，你至少要修复 div class='modal-content' 的高度并使页脚位置绝对。您在这里找到解决方案的最佳机会是做更多的工作来制作一个 sn-p 或 JS Fiddle，说明 HTML 和 css 的缩减版本，以便可以在 F12/浏览器开发工具中检查它。

@VanquiishedWombat 正确的高度应该是多少？它应该是一个数字还是任何其他值？

查看我的编辑，在您做更多的工作并编辑您的问题以使其更准确之前，没有人可以给您一个明确的答案。这个想法是你做一些工作，清楚地向我们展示问题，然后我们告诉你如何解决。

@VanquiishedWombat 我确实将height 应用到class="modal-content" 和position:absolute 到页脚，但没有任何改变......

Cheeky 用户的邮箱位居首位。

【参考方案1】：

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

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

【参考方案2】：

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

这对我有用

谢谢

【参考方案3】：

我还没有用 Materialize 的版本 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 的背景时出现的像素宽间隙。

【参考方案4】：

你可以试试max-height使用calc()函数，比如：

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

看看下面的sn-p（使用全屏）：

$(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>

希望这会有所帮助！

【讨论】：

这项工作...页眉和页脚是可滚动的，并且页脚与成员重叠...

@weinde 页眉和页脚不可滚动。此外，成员不与页脚重叠。请使用全屏模式再次检查。

我这样做并得到了我写的结果......也许我的浏览器有问题？

@weinde 你能把我的代码在你的浏览器上全屏运行的截图发给我吗？

感谢@SauravRastogi：height: auto !important; max-height: calc(100vh - 340px) !important; CSS 为我工作！你节省了我的时间！ :)

【参考方案5】：

你看起来像这样？？如果没有，请在 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>

【讨论】：

不...我以为你提供的这个小提琴是我的问题的描述...它仍然没有解决

像这样修复模态内容的 div 高度：-

谢谢 :) 这行得通，但现在我在内容和页脚 xD 之间有一个巨大的空白

然后根据你的要求降低身高？

ok 降低了高度，现在看起来还不错，但是下一个问题是在将窗口大小调整为小屏幕后问题没有解决...