修复了隐藏的页脚通过背景显示

Posted 2023-03-21

【中文标题】修复了隐藏的页脚通过背景显示

【英文标题】：fixed hidden footer showing though background

【发布时间】：2019-01-10 07:56:13

【问题描述】：

这是我在这里的第一篇文章。

我目前正在开发的网站有一个小问题。 由于我使用的是（css）视差标题，因此我也希望有一个“特殊”的页脚。

这个想法是让它固定在底部，让正文首先显示页脚底部。 问题是我的网站由多个部分组成，并且页脚在它们之间可见。

我尝试通过在这样的段之间创建背景来解决此问题

.background  
 color: #f1f1f1; 
 width: 100%; 
 height: 90%; 
 z-index: -2;

我的页脚看起来像这样

.footer 
    padding: 40px 0;
    text-align: center;
    text-decoration: none;
    background: black;
    color: #white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: -1;

但无论我尝试使用哪个z-index，页脚要么完全位于背景中，要么位于所有内容的前面。

我真的不知道我还能尝试什么。

这是我的（缩短的）html 正文（之前只有标题和导航栏）：

<div class="main">
    <div class="row">
        <div class="leftcolumn">

            <div class="card">
                <h1><?php echo $welcome1;?></h1>
                <h5><?php echo $post;?></h5>
                <p><?php echo $welcome2;?></p>
            </div>

            <div class="card">
                <h2>Hiragana</h2>
                <h5><?php echo $post;?></h5>
                <img src="..//nihongo/pics/hiragana.png"  >
                <p><?php echo $hira;?></p>
            </div>

            <div class="card">
                <h2>Katakana</h2>
                <h5><?php echo $post;?></h5>
                <img src="..//nihongo/pics/katakana.png"  >
                <p><?php echo $kata;?></p>
            </div>
        </div>

        <div class="rightcolumn">

            <?php include '../nihongo/php/language.php'; ?>

            <div class="card">
                <h2><?php echo $me1;?></h2>
                <img src="../nihongo/pics/me.png"   style="border: 1px solid black;border-radius:10px;">
                <p><?php echo $me2;?></p>
            </div>

            <div class="card">
                <h3><?php echo $use;?></h3>
                <div class="fakeimg"><p>Hiragana</p></div><br/>
                <div class="fakeimg"><p>Katakana</p></div><br/>
                <div class="fakeimg"><p>Kanji</p></div><br/>
            </div>

            <?php include '../nihongo/php/follow.php';?>

        </div>
    </div>
  </div>

    <?php include '../nihongo/php/footer.php';?>

</body>

我正在使用所有这些 PHP 变量，因为我正在以多种语言运行这个网站。

这是没有我“修复”的问题的屏幕截图：

如果你愿意，我可以为你提供更多我的代码 - 只要告诉我你想看什么（我现在不想让这篇文章太长）。

【问题讨论】：

欢迎来到 SO。请访问help centre 以查看how to ask a good question。如果您没有提供足够的代码来复制问题，我们将无法帮助您 - 请参阅如何创建 minimal reproducible example

也分享您的 HTML。

好的，谢谢。我添加了一些我的 HTML 代码

您的页脚在.main 之外，对吗？您应该能够在.main 上添加background-color 和一些margin-bottom（= 页脚的高度），因此页脚只有在margin-bottom 留下的空间中才可见

成功了！谢谢！

【参考方案1】：

您可以为.main 定义一个白色 (?) 背景，并将margin-bottom 添加到.main，其值等于页脚的高度。这样，只有在.main 一直向下滚动后，页脚才会在定义为其底部边距的空间中可见。