Rolling footer (overflow Hidden)

Asked

Viewed 61 times

3

Hello, I am creating an html code with bootstrap in which I am adding a footer, but when I put the footer, my page adds a scrollbar to be able to view the footer... it is just a copyright and I would like it to be on the same screen and without the overflow(Rolling bar)... someone could 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" rel="stylesheet"/>
<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>

html html5

1 answer

1


Just take it out of the height of the container the height of footer. Notice that when you put the class h-100 of Bootstrap you leave the container 100% height, and then adding the 56px footer ends up generating the scroll bar.

My suggestion is to create the class .cotainer-footer and use the calc() CSS to do type adjustment height: calc(100% - 56px) !important; and in your HTML 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 of each one, I preferred to do so...

See how it looks, run across 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" rel="stylesheet"/>
<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>

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.