0

I am working on spring boot, thymeleaf project. Everything works fine except the footer is not fixed. Its position is changed everytime I change a page.

Here is the template1.html page where I create the header and the footer. 

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">.      </script>
 </head>
  <body>
   <header>
  <div class="container">
     <nav class="navbar navbar-default" role="navigation">

         <div class="navbar-header">
            <a class="navbar-brand" href="#">Jeutroll</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a th:href="@{/home}">Home</a></li>

                <li class="dropdown">
                    <a th:href="@{/category}" class="dropdown-toggle" datatoggle="dropdown">
                        Category
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="/getVideoByCategory/Actuality">Actuality</a></li>
                        <li><a href="/getVideoByCategory/Fun">Fun</a></li>
                        <li><a href="/getVideoByCategory/Music">Music</a></li>

                    </ul>

                </li>
                <li><a th:href="@{/addVideo}">add a video</a></li>
            </ul>

            <ul class="nav navbar-nav  navbar-right">

                <li sec:authorize="!isAuthenticated()">
                    <a th:href="@{/registration}"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
                </li>

                <li sec:authorize="!isAuthenticated()">
                    <a th:href="@{/login}"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                </li>

                <li sec:authorize="isAuthenticated()" class="nav-item dropdown">

                    <!--
                           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"         role="button" data-toggle="dropdown"    aria-haspopup="true" aria-expanded="false" sec:authentication="name">

                           </a>-->

                    <a class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user"></span>
                        <span sec:authentication="name"></span>
                    </a>

                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a th:href="@{/addVideo}">add a video</a></li>
                        <div class="dropdown-divider"></div>
                        <li><a th:href="@{/logout}">Logout</a></li>
                    </ul>

                </li>

            </ul>
        </div>

    </nav>
</div>
</header>
   <section layout:fragment="content">   </section>

     <footer class="footer-bs">
     <div class="navabar-fixed-bottom">
    <small>adress</small>
       </div>
       </footer>
       </body>
    </html>

The login page:

   <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="template1.html">
<head>
<meta charset="UTF-8">
<title>Jeutroll</title>
 </head>
 <body>
 <div layout:fragment="content">
 <div class="container">

    <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 well well-sm">

     <form th:action="@{/login}" method="POST" class="form-signin">

          <div th:if="${param.error}" th:class="text-red">
            Incorrect username or password
        </div>

        <h3 class="form-signin-heading" th:text="Welcome"></h3>
        <br/>

        <div class="form-group">
            <input type="text" id="username" name="username" th:placeholder="username"         class="form-control" required/>
        </div>
        <div class="form-group">
            <input type="password" th:placeholder="Password" id="password" name="password" class="form-control" required/> <br/>
           </div>
        <div class="form-group">

               <button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit" th:text="Login"></button>
       </div>
        </form>
    </div>
</div>
   </div>
 </body>
</html>

Any idea how I can fix it so it will not change and it will be always at the bottom even when I change the pages?

Thank you for your help.

Marquise Mery
  • 130
  • 9
  • When you say "at the bottom" - do you mean "at the bottom of the [viewport](https://stackoverflow.com/questions/2939693/what-is-viewport-in-html)" (i.e. the visible web page)? If so, take a look at [this](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b). A few different techniques are suggested. Does that answer your question? – andrewJames Mar 14 '20 at 14:08
  • I mean at the bottom of the page and it should be fixed (always in the same position). No, it did not help. – Marquise Mery Mar 15 '20 at 18:37

1 Answers1

0

Every bootstrap code has a special annotation to fix the footer(or navbar). In my case I use mdbootstrap.com, I add fixed-bottom to class attribute to fix the footer at the bottom. If you can't find it, use this css code instead:

<style>
.footer_fix {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
Omar
  • 204
  • 2
  • 3