定位页脚

Question

由于我的页脚 HTML 标记切换位置，我无法定位它。 正如您在我的 IDE 中看到的那样，我已将页脚设置在 HTML 部分的最底部。但是，一旦我运行我的应用程序，它就会向上移动 2 行来改变位置。

是不是因为remodal-pop box的配置？知道如何解决这个问题吗？ 这是图片，以便更容易理解。

这是我的 css-footer 代码：

.footer {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
     padding: 1rem;
     text-align: center;
     background: #2E3438;
     color:white;
     height: 23px;
     line-height: 8px;
     font-size: 13px;         
}

以及由于 remodal-pop 错误而无法更改的 html 和正文：Twitter Bootstrap modal pushes html content to the left

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

EDIT（在给出答案之后）： 这是您需要更改的代码（追加到前面）文件的名称是 jquery.remodal.js:

if (!remodal.$overlay.length) {
      remodal.$overlay = $('<div>').addClass(namespace + '-overlay');
      remodal.$body.prepend(remodal.$overlay);
    }

    remodal.$bg = $('.' + namespace + '-bg');
    remodal.$closeButton = $('<a href="#"></a>').addClass(namespace + '-close');
    remodal.$wrapper = $('<div>').addClass(namespace + '-wrapper');
    remodal.$modal = $modal;
    remodal.$modal.addClass(namespace);
    remodal.$modal.css('visibility', 'visible');

    remodal.$modal.prepend(remodal.$closeButton);
    remodal.$wrapper.prepend(remodal.$modal);
    remodal.$body.prepend(remodal.$wrapper);

Answer 1

您的remodal js 脚本只是将那些div-s 附加到准备好的文档中。

正如我在 remodal 主页上看到的那样，它们都是 position: fixed，所以只要您没有更改这些 remodal 容器的样式 - 它们就无法移动您绝对定位的页脚。

问题可能出在其他地方。您可以修改 remodal 脚本并预先添加（或放置在其他位置）这些容器，但我认为这并不重要。

也许其中一种 remodal 样式有问题？您可以从 DOM 中删除样式进行测试（仅保留 js）。