is there an footer tag for fixing it in bottom with out hiddin another elements

Question

I create a static page to log in only and I want to be the footer at the bottom but when the page zoom or on the mobile phone the footer appear above the content or brothers content and I do not know how to make it suitable with the page even after reading some of the questions here and this code.

*{
  box-sizing: border-box;
  font-family:Courier New;
  padding:0px;
}
html {
  height:100%;
}
body {
    margin: 0px;
  position: relative;
  height:100%;
}
nav a img {
  width: 50px;
  max-width: 50px;
  margin-left:4px;
}
nav {
  display:flex;
  flex-wrap: wrap;
  align-items: center;

}
ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 20px;
}
ul li{
  list-style: none;
  padding: 8px;
  margin: 0px 3px;
  background:#3c6382;
  font-weight: bold;
  height: auto;
  border: 2px solid #3c6382;
  border-radius: 4px;
  cursor: pointer;
  width:120px;
  max-width: 100%;
  text-align: center;
}
ul li:hover {
  background:#079992;
   border: 2px solid #079992;
}
ul li a {
  text-decoration: none;
  color:snow;
}
header {
  display: flex;
  background:#222222;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.header-login {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
}
.login-f {
  margin: 0px 5px;

}
.login-f button{
  transition:0.3s all ease-in-out;
  background: snow;
  border: 0px;
  border-left:6px solid #3c6382;
  width: 85px;
  height: 35px;
  font-weight: bold;
  cursor: pointer;
   text-align:center;
   border-radius:4px;
}
.login-f button:hover{
  border-width:8px;
    background: #3c6382;
    border-left:6px solid #3c6382;
    color: snow;
}
.login-f input {
  width: 175px;
  border: 0px;
  border-top:4px solid #3c6382;
  border-radius: 3px;
  height:35px;
  padding:4px;
}
.signout-f button{
    transition:0.3s all ease-in-out;
  background: snow;
  border: 0px;
  border-left:6px solid #3c6382;
  width: 85px;
  height: 35px;
  font-weight: bold;
  cursor: pointer;
   text-align:center;
   border-radius:4px;
  margin: 0px 5px;
}
.signout-f button:hover{
   border-width:8px;
    background: #3c6382;
    border-left:6px solid #3c6382;
    color: snow;
}
.signup-l{
  background:#3c6382;
  color:snow;
  width: 80px;
  text-align: center;
  font-weight: bold;
  border: 6px solid #3c6382;
  border-radius: 3px;
  cursor: pointer;
  height: 35px;
  text-decoration:none;
  margin:0px 5px;
  padding: 3px;
  transition:0.3s all ease-in-out;

}

.signup-l:hover{
  background: snow;
  color:#222222;
  border: 6px solid snow;
}

.main-div {
  text-align: center;
  width: 550px;
  margin: 60px auto;

}
.main-div p{
  color: #ecf0f1;
    background: #2d2d2d;
  height: 35px;
  padding: 8px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 1px 0.5px 6px #2c3e50;
}
footer{
  background: #222222;
  margin: 0px;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  color:snow;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="Login Traning" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <title>Login</title>
    <link rel="stylesheet" href="style/style.css"/>
  </head>
  <body>
    <!-- The Head Of Page-->
    <header>
      <!-- The Navbar Of Page-->
      <nav>
        <a class="header-logo" href="#">
          <img src="img/logo3.png" alt="logo"/>
        </a>
        <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">AboutMe</a></li>
        </ul>
      </nav>
        <!-- The Login Of Page-->
      <div class="header-login">
        <form class="login-f" action="includes/login.inc.php" method="post">
          <input type="text" name="userin" placeholder="Username E-mail"/>
          <input type="password" name="pwd" placeholder="Password" />
          <button type="submit" name="login-submit">Login</button>
        </form>
        <!-- The Register Of Page-->
        <a href="signup.php" class="signup-l">SignUp</a>
        <!-- The signout Of Page-->
        <form class="signout-f" action="includes/logout.inc.php" method="post">
          <button type="submit" name="logout-submit">Logout</button>
        </form>
      </div>
    </header>
    <!-- End Of Header -->
<main>
  <div class="main-div">
    <p> You'r Logged In </p>
    <p> You'r Not User </p>
  </div>
</main>
    <footer>
      <p class="p-footer">&copy; Designed By: MahmoudMansour</p>
      <script type="text/javascript" src="style/main.js"></script>
    </footer>
  </body>
</html>

score 2 · Answer 1 · answered Jun 24 '19 at 20:37

It is not entirely clear what king of stickiness you are looking for in your footer, but from the code I am assuming that flex will give you what you are looking for by changing your main structure and adding these 2 css classes.

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

If you are looking for other types of sticky footer then CSS tricks has a great article solving the problem https://css-tricks.com/couple-takes-sticky-footer/

score 2 · Accepted Answer · edited Jun 25 '19 at 07:57

You can fix your issue if you set to body { min-height: 100%; } instead of height. This will result that your body will behave 100% to your browser unless the content inside is bigger than the visible viewport.

Another thing you can easily change is to make your footer { position: fixed; } instead of position: absolute;.

position: fixed doesn't care about any element, any wrapper, nor a position: relative parent, which means it's fully independent and will always appear where you tell it to appear on the screen.

One more thing you should do is apply some padding-bottom: // the size of your footer to the body element, so when you scroll, the body takes care with some extra space about the element which is always over every other element.

So, to summarize, do the following:

body {
   min-height: 100%;
   padding-bottom: 40px; /* assuming 40px is the size of your footer*/
   /*...the rest of your code*/
}

footer {
   position: fixed;
   height: 40px; /* define a height here as well, in order to be more precise*/
   /*...the rest of your code*/
}

But Idont Need To Make it are movable - i need make it static in the bottom but when i make it static in bottom and resize the screen smaller than my desktop it Covers content or moves above ineed to make it static like stackoverflow — Mahmoud Adel Mansour, Jun 24 '19 at 22:05
Making it movable is one option since when elements don't fit into the view anymore, the scroll appears. Although, you can always change the style of your header which would take less space into the view when it comes to mobile. — Ardian, Jun 25 '19 at 10:00

is there an footer tag for fixing it in bottom with out hiddin another elements

2 Answers2