javascript - MaterializeCSS 模态标题

Question

我正在使用 materializecss 框架，对吧，我正在尝试制作一个与“modal-footer”相同的“modal-header”。

比如，当我使用“modal-footer”时，它会在模式上方创建一个 block ，甚至停止滚动条。

所以我复制了一些“modal-footer”属性并粘贴到 css 上的一个新的“modal-header”类。

看:

HTML:

<div id="termosdecontrato" class="modal modal-fixed-footer">
<div class="modal-header"><h4 class="centroh">Termos de contrato</h4></div>
<div class="modal-content">

<p style="text-align:justify;text-justify:inter-word;">Lorem ipsum</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Entendi</a>
</div>
</div>

CSS:

.modal {
  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 only screen and (max-width : 992px) {
    .modal {
      width: 80%; } }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0; }
  .modal .modal-content {
    padding: 24px; }
  .modal .modal-close {
    cursor: pointer; }
  .modal .modal-header {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
    .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
      float: right;
      margin: 6px 0; }

.lean-overlay {
  position: fixed;
  z-index: 999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity; }

.modal.modal-fixed-footer {
  padding: 0;
  height: 70%; }
    .modal.modal-fixed-footer .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0; }
  .modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto; }
  .modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0; }

但是我有这个: http://i.imgur.com/dUZS5m4.png

PS.: 我过去的问题声望越来越低，为什么？ PS².:我不能发布图片，好吗？

Answer 1

模态内容侵入标题空间的原因是因为您的“modal-header”和“modal-content”div 都是绝对定位的。

位置为“绝对”的元素相对于它的容器元素放置在页面上——容器元素是包含它的最近定位元素(“绝对”、“相对”或“固定”)。

这意味着您的两个 div 只关心它们的直接父级，即“模态”div，它们完全不关心彼此。

虽然“modal-header”div 上的 z-index 和“modal”div 上新的 calc-height 和 margin-top 可以直观地解决问题，但推荐的解决方案是同时更改“modal- header"和你的 "modal-content"div 相对定位，然后处理溢出的内容，使其符合 "modal-content"div 的大小。

希望对您有所帮助!

Here's a decent css-tricks article on the issue