当试图将“返回顶部”移到页脚正上方的右侧时，页脚会消失。我想尝试让按钮位于页脚上方。 在我实现“返回顶部”按钮之前，我也遇到过它没有正确对齐的问题，因为它没有覆盖底部页面的左侧。
我也尝试过寻找解决方案，但我发现的解决方案使用的是 javascript/jquery，而我必须只使用 html 和 css 来实现。
编辑:我删除了不必要的东西，保留了表格，因为我认为这是导致问题的原因，因为它在较小的屏幕上无法很好地缩放。也忘了前面提到它也会导致导航栏在右上角留下空间，这就是为什么我也把它留在里面的原因。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" type="text/css" rel="stylesheet">
<a name="top"></a>
<div class="nav">
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">
<a href="index.html" class="active">Link1</a>
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
</div>
<h1>Comments</h1>
<table id = "table">
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
</table>
</td>
</tr>
<div class="btopbutton">
<a href="#top">Back to top</a>
<div>
<div class="footer">
<p><span> Website | Website | Copyright 2019</span></p>
<a href="#"> Link 1 </a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a></div>
</div>
</body></html>
@charset "UTF-8";
/*set background for whole page*/
html {
background-color: #26734d;
scroll-behavior: smooth;
margin: 0;
padding: 0;
width: 100%;
height: 100%;}
/*--start of nav bar--*/
* {
box-sizing: border-box;
}
.nav {
/* height: 50px;*/
width: 100%;
background-color: #4d4d4d;
position: relative;
}
.nav > .nav-header {
display: inline;
}
.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.nav > .nav-btn {
display: none;
}
.nav > .nav-links {
display: inline;
float: center;
font-size: 18px;
}
.nav > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
text-transform: uppercase;
}
.nav > .nav-links > a:hover {
font-weight: bold;
/* background-color: rgba(0, 0, 0, 0.3);*/
}
:any-link {
color: #efefef;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
:any-link:hover {
font-weight: bold;
cursor: pointer;
}
.nav > #nav-check {
display: none;
}
/*--end of nav bar--*/
.heading1{
color:#FFFFFF;
}
/* Style the validation */
#validation{
text-align:center;
padding: 10px 10px;
}
.footer {
text-align: center;
padding-top:20px;
padding-bottom: 20px;
background-color: #1B1B1B;
color: #FFFFFF;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: 2px;
border-top-width: 2px;
padding: 2px;
color:#ffffff;
width: 100%;
position: absolute;
font-weight: 200;
}
/*back to top button*/
.btopbutton
{
position: fixed;
bottom: 0;
right: 0;
text-align:right;
}
/*--table in comments section --*/
#table{
border: solid 1px black;
border-collapse: collapse;
width:100%;
text-align: center;
}
#table th{
border: solid 1px black;
border-collapse: collapse;
background-color: inherit;
}
#table td{
border: solid 1px black;
background-color: inherit;
border-collapse: collapse;
}
/*--end of table in the comments --*/
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Moved Content Below Header */
.content {
margin-top:50px;
}
}
@media (max-width:600px) {
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: auto;
overflow-y: auto;
}
}
@media (max-width:300px){
#table p{
width:100%;
text-align: justify;
}
#table ul{
width: 58%
}
#table tr{
display: inline-flex;
width: 100%;
}
#table th{
width: 100%;
}
}
最佳答案
我建议如下:
.nav {
/* height: 50px;*/
width: 100%;
background-color: #4d4d4d;
position: relative;
}
这里有相对导航“parent”，因此 child 将被放置在该上下文中的绝对位置。谈到 .footer，你已经放置了绝对位置，但没有相对父级，没有底部，右边 0 等。因此对于页脚，尝试制作另一个 div 类名称 .wrapper 相对于文档流定位，然后在该父位置内，您的页脚 div。按钮固定位置也会发生同样的情况。
关于html - 实现返回顶部按钮时页脚消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57832193/