html - 定位页脚

标签 html css

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

是不是remodal-pop box配置的问题?知道如何解决这个问题吗? 这是图片,以使其更易于理解。

enter image description here

这是我的 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;         
}

和 html 和正文,由于 remodal-pop 错误,我无法更改:Twitter Bootstrap modal pushes html content to the left

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

编辑(在给出答案后): 这是您需要更改的代码(附加到前缀)文件的名称是 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);

最佳答案

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

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

可能问题出在别处。您可以修改 remodal 脚本并在前面添加(或放置在其他地方)这些容器,但我认为这无关紧要。

也许其中一种 reshape 样式有问题?您可以从 DOM 中删除样式以进行测试(仅保留 js)。

关于html - 定位页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36545794/

相关文章:

css - css中首字母大写,其他字母小写?

css - 计算色值关系

html - 如何防止移动设备字体缩放

javascript - 如何选择 .getPropertyValue 返回的单位 ("text-size") ; JS查询

javascript - Bootstrap 4 工具提示有 2 个问题。第一个 - 单击按钮时显示,第二个 - 显示禁用元素

html - 盒子没有正确对齐

html - 单击按钮更改铁页选定值

javascript - 使用 CSS 逐渐改变图像(删除过渡)

javascript - css 中的圆 Angular 菜单项,无需 CSS3!

css - 如何为 joomla 中的每个模板添加不同的 css 类