Нижний колонтитул / навигационная панель не будут фиксироваться внизу - PullRequest
Новая
       0

Нижний колонтитул / навигационная панель не будут фиксироваться внизу

0 голосов
/ 06 апреля 2020

В начале, прежде чем я решил создать несколько html страниц, мой код работал нормально, однако после создания нескольких страниц html внезапно мой нижний колонтитул не хочет оставаться внизу фактической страницы, но внизу содержания. На других моих страницах панель навигации длиннее и умещается на весь экран, тогда как внезапно на моей главной странице пользователя она уменьшилась в размере. Любое разрешение?

my 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>

MY 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;
}

Ответы [ 2 ]

1 голос
/ 06 апреля 2020

Попробуйте fixed-bottom

<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>

Можно найти здесь

0 голосов
/ 06 апреля 2020

Прежде всего, лучше использовать тег nav вместо тега div для панелей навигации. Ваша навигация не завершена. Взгляните на это: 

<nav class="navbar navbar-fixed-bottom">
   <div class="navbar-nav">
         <a href="./users.html" class="active nav-link">Users</a>
         <a href="./addUser.html" class="nav-link">Add User</a>
         <a href="./editUser.html" class="nav-link">Edit User</a>
   </div>
</nav>

Надеюсь, это поможет вам, особенно класс navbar-fixed-bottom .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...