修复了显示背景的隐藏页脚
fixed hidden footer showing though background
这是我第一次 post 来这里。
我目前正在使用的网站出现了一个小问题。
因为我使用的是 (css) 视差 header 我也想有一个 "special" 页脚。
我的想法是让它固定在底部,让 body 先显示页脚底部。
问题是我的网站由多个部分组成,页脚在它们之间可见。
我试图通过像这样在片段之间创建背景来解决这个问题
.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 body(之前只有 header 和一个导航栏):
<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" width="650px" height="400px">
<p><?php echo $hira;?></p>
</div>
<div class="card">
<h2>Katakana</h2>
<h5><?php echo $post;?></h5>
<img src="..//nihongo/pics/katakana.png" width="650px" height="400px">
<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" width="240px" height="322px" 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 变量,因为我 运行 这个网站有多种语言版本。
这是没有我 "fix":
问题的截图
如果你愿意,我可以为你提供更多我的代码 - 只要告诉我你想看什么(我现在不想 post 太长)。
您可以为 .main
定义白色 (?) 背景,并向 .main
添加一个 margin-bottom
,其值等于页脚的高度。这样,页脚只会在 .main
一直向下滚动后才可见,在 space 中被定义为其边距底部。
这是我第一次 post 来这里。
我目前正在使用的网站出现了一个小问题。 因为我使用的是 (css) 视差 header 我也想有一个 "special" 页脚。
我的想法是让它固定在底部,让 body 先显示页脚底部。 问题是我的网站由多个部分组成,页脚在它们之间可见。
我试图通过像这样在片段之间创建背景来解决这个问题
.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 body(之前只有 header 和一个导航栏):
<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" width="650px" height="400px">
<p><?php echo $hira;?></p>
</div>
<div class="card">
<h2>Katakana</h2>
<h5><?php echo $post;?></h5>
<img src="..//nihongo/pics/katakana.png" width="650px" height="400px">
<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" width="240px" height="322px" 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 变量,因为我 运行 这个网站有多种语言版本。
这是没有我 "fix":
问题的截图如果你愿意,我可以为你提供更多我的代码 - 只要告诉我你想看什么(我现在不想 post 太长)。
您可以为 .main
定义白色 (?) 背景,并向 .main
添加一个 margin-bottom
,其值等于页脚的高度。这样,页脚只会在 .main
一直向下滚动后才可见,在 space 中被定义为其边距底部。