在我决定制作多个 html 页面之前，我的代码工作正常，但是在制作多个 html 页面之后，突然我的页脚不想停留在实际页面的底部，而是停留在内容的底部。在我的其他页面中，导航栏更长并且适合整个屏幕，而在我的主用户页面上它的尺寸突然缩小了。有什么解决办法吗？
我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth@reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver@reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong@reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt@reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris@reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos@reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<div class="navbar">
<a href="./users.html" class="active">Users</a>
<a href="./addUser.html">Add User</a>
<a href="./editUser.html">Edit User</a>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
我的CSS:
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
th {
background: #67c8f5;
position: sticky;
top: 0px;
}
.table {
border-collapse: separate;
}
#sectUser {
border: 3px solid #67c8f5;
margin-bottom: 120px;
color: black;
}
.navbar {
background-color: #67c8f5;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #67c8f5;
color: black;
}
最佳答案
尝试固定底部
<div class="navbar fixed-bottom">
<a href="./users.html" class="active">Users</a>
<a href="./addUser.html">Add User</a>
<a href="./editUser.html">Edit User</a>
</div>
待找到here
关于javascript - 页脚/导航栏不会固定在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61064387/