Wordpress 页脚显示在页面中间答案

【问题标题】：Wordpress Footer is shown in the middle of the pageWordpress 页脚显示在页面中间
【发布时间】：2022-03-02 23:53:20
【问题描述】：

我的自定义 wordpress 页面有问题。我想使用默认的页眉和页脚。这个问题只发生在 safari 上。在 Chrome 上运行良好！

页脚显示在页面中间而不是页面末尾。你有什么建议吗？

这是我的代码。

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fahrzeugkunde - TLF</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="Modal.css">
</head>

<body>
    <div>
        <?php require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
        get_header(); ?>
    </div>
    <main class="feuerwehr-body">
        <div class="feuerwehr-flexContainer">
            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA2.JPG" alt="GA2" usemap="#image-mapGA2">
                <map name="image-mapGA2">
                    <area class="area" shape="rect" coords=" 1885, 1611, 2101, 2130 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                    
                </map>
            </div>

            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA4.JPG" alt="GA4" usemap="#image-mapGA4">
                <map name="image-mapGA4">
                    <area class="area" shape="rect" coords=" 97, 525, 1340, 790 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                </map>
            </div>
            <div class="feuerwehr-imageContainer">
                <img class="feuerwehr-image" src="../images/TLF/GA6.JPG" alt="GA6" usemap="#image-mapGA6">
                <map name="image-mapGA6">
                    <area class="area" shape="rect" coords=" 199, 642, 366, 1829 " alt="placeholder" onclick="openInfo('Feuerlöscher', 'Das ist ein Feuerlöscher')">
                    
                </map>
            </div>

            <div id="myModal" class="Modal is-hidden is-visuallyHidden">
                <!-- Modal content -->
                <div class="Modal-content" id="modal-image-container">
                    <div class="modal-image" id="modal-image">

                    </div>
                    <div style="display: flex; justify-content: end;">
                        <button class="custom-button custom-button--inline" id="sig-cancellationBtnImage">Zurück</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.rwdImageMaps.min.js"></script>
        <script>
            $(document).ready(function(e) {
                $('img[usemap]').rwdImageMaps();
            });
        </script>
        <script src="Modal.js"></script>
        <script src="index.js"></script>
    </main>
    <div style="display: none">
        <?php get_footer(); ?>
    </div>

</html>

【问题讨论】：

标签： javascript php html css wordpress

【解决方案1】：

get_footer() wordpress 方法将 html 模板代码添加到您的页面：https://developer.wordpress.org/reference/functions/get_footer/

调用应该是 INSIDE html 标签（与 get_header() 相同）。也许 chrome 可以接受，但 safari 似乎更敏感。

无论如何，wordpress 会加载大量 css 和 js 文件，我们无法确定您的帖子中的页面应用了哪种样式。

【讨论】：

不幸的是它没有解决我的问题。我做了一个简单的解决方案并将页脚设置为显示：无。我真的不需要它

【解决方案2】：

将</html> 放在get footer() 函数之后是错误的，因为它应该已经在页脚文件中。希望我足够清楚（我的英语不是我的母语）。

【讨论】：