Fatal编程技术网
  • html/
  • Html 具有固定页眉和页脚以及可滚动内容的模式对话框

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

html css

Html 具有固定页眉和页脚以及可滚动内容的模式对话框,html,css,material-design,materialize,Html,Css,Material Design,Materialize,我正在尝试创建一个有固定页眉和页脚的模式对话框，并且模式对话框中的内容（在本例中是用户列表）是可滚动的 到目前为止，我的最佳尝试在图像上给出了结果： 我假设在看到图像后，我不必描述问题是什么。。。我还假设您将知道解决方案应该是什么样子……：） 但为了确定我还是会写的。。。模式对话框需要有一个固定的页眉（标题“编辑板”、“板名”和“板类型”所在的区域）和页脚（保存”按钮所在的区域）必须固定/不可拆分。。。唯一需要滚动的是用户列表 代码： <div id="addBoardModal" cl

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

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

我假设在看到图像后，我不必描述问题是什么。。。我还假设您将知道解决方案应该是什么样子……：）

但为了确定我还是会写的。。。模式对话框需要有一个固定的页眉（标题“编辑板”、“板名”和“板类型”所在的区域）和页脚（保存”按钮所在的区域）必须固定/不可拆分。。。唯一需要滚动的是用户列表

代码：

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

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

.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框架

您可以使用
calc（）
函数尝试
max height
，如：

.modal-content {
  height: auto !important;
  max-height: calc(100vh - 340px) !important;
}
查看下面的代码段（使用全屏）：

$（文档）.ready（函数（）{
//.modal触发器的“href”属性必须指定要触发的模态ID
$（'.modal触发器'）.leanmodel（）；
});

.modal{
溢出：隐藏；
}
.模态标题{
填充：15px；
边框底部：1px实心rgba（0,0,0,0.1）；
}
.模态头h4{
保证金：0；
}
.模态内容{
高度：自动！重要；
最大高度：计算（100vh-340px）！重要；
}
.内容行{
显示器：flex；
对齐项目：居中；
填充：10px；
边框底部：1px实心#ddd；
}
.内容行：最后一个子项{
边框底部：无；
}
.图标{
宽度：40px；
高度：40px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：50%；
背景：#33b5e5；
颜色：#fff；
}
.姓名{
填充：0 10px；
}
.角色{
填充：0 10px；
弹性：1；
文本对齐：右对齐；
}



模态头
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色
1.
名称
角色

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




引导示例
模态示例
开放模态
&时代；
模态头
模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本。模态中的一些文本情态。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本情态。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本情态。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本情态。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本。情态中的一些文本

接近

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



{{title}}
分享

我还没有用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;
}


只需将标题为
的类添加到模式中，并在“.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标头的背景时出现的像素宽间隙

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

谢谢

简单看一下，您的HTML格式似乎不正确。如果你想纠正它，你至少要固定div class='modal-content'的高度，并使页脚位置绝对。您在这里找到解决方案的最佳机会是做更多的工作，制作一个片段或JS提琴，演示HTML和css的简化版本，以便在F12/浏览器开发工具中进行检查。@VanquishedWombat正确的高度应该是多少？嘘