html – Footer sem rolamento(overflow hidden)

Question:

Hi, I'm creating a bootstrap html code where I'm adding a footer, but when I put the footer, my page adds a scroll bar so I can see the footer… it's just copyright and I'd like it to stay on same screen and without the overflow(scroll bar)… could someone help me?

body {
    background-image: linear-gradient(to top right, #fff, #aaa);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    border-radius: 15px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 10px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: dodgerBlue;
    box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"]:focus + i,
.inputWithIcon input[type="password"]:focus + i {
    color: dodgerBlue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div class="container h-100">
  <div class="row h-100 align-items-center">
    <div class="col"></div>
    <div class="col-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title text-center mb-4 mt-1">Login</h4>
          <hr>
          <form method="" id="form" autocomplete="off">
            <!--Inputs para preenchimento dos dados do usuário-->
            <div class="">
              <input name="numeroSerie" class="form-control" autofocus type="text">
            </div>

            <div class="">
              <input id="user" class="form-control" autofocus type="text">
              
            </div>

            <div class="">
              <input id="pass" class="form-control" autofocus type="password">
            </div>
            
            <label for="remember_pass"><input type="checkbox" id="remember_pass"> Lembrar senha</label>

            <br>

            <label for="remember_login"><input type="checkbox" id="remember_login"> Permanecer conectado </label>

            <hr>

            <div class="form-group">
              <button type="submit" class="btn btn-outline-primary btn-block">Acessar</button>
            </div>
            
          </form>

        </div>
      </div>

    </div>

    <div class="col"></div>
  </div>
  <footer class="page-footer font-small blue">

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">
      © 2019 Copyright:
       Samuel
    </div>
    <!-- Copyright -->

  </footer>
</div>

Answer:

Just deduct the height of the footer from the height of the container . Note that when you put the Bootstrap h-100 class you leave the container with 100% height, and then adding the 56px of the footer ends up generating the scrollbar.

My suggestion is to create the .cotainer-footer class and use the CSS calc() to adjust the height: calc(100% - 56px) !important; type height: calc(100% - 56px) !important; and in HTML your container would be <div class="container container-footer"> removing the h-100 . There are other options to do this, you can use position:absolute or fixed and bottom:0 , but there goes each one, I preferred to do it like this…

See how it looks, run in full page

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}


body {
    background-image: linear-gradient(to top right, #fff, #aaa);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    border-radius: 15px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 10px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: dodgerBlue;
    box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"]:focus + i,
.inputWithIcon input[type="password"]:focus + i {
    color: dodgerBlue;
}
.container-footer {
	height: calc(100% - 56px) !important;
}
</style>
</head>
<body>
	

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div class="container container-footer">
  <div class="row h-100 align-items-center">
    <div class="col"></div>
    <div class="col-5">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title text-center mb-4 mt-1">Login</h4>
          <hr>
          <form method="" id="form" autocomplete="off">
            <!--Inputs para preenchimento dos dados do usuário-->
            <div class="">
              <input name="numeroSerie" class="form-control" autofocus type="text">
            </div>

            <div class="">
              <input id="user" class="form-control" autofocus type="text">
              
            </div>

            <div class="">
              <input id="pass" class="form-control" autofocus type="password">
            </div>
            
            <label for="remember_pass"><input type="checkbox" id="remember_pass"> Lembrar senha</label>

            <br>

            <label for="remember_login"><input type="checkbox" id="remember_login"> Permanecer conectado </label>

            <hr>

            <div class="form-group">
              <button type="submit" class="btn btn-outline-primary btn-block">Acessar</button>
            </div>
            
          </form>

        </div>
      </div>

    </div>

    <div class="col"></div>
  </div>
  <footer class="page-footer font-small blue">

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">
      © 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
    <!-- Copyright -->

  </footer>
</div>
	
</body>
</html>
Post Views: 0
Scroll to Top
AllEscort