I have this page, that I placed the height of the page in 100VH , to occupy the whole screen, but it is generating these white spaces on the bottom and side, and this is making scroll bars appear, I do not know why.
HTMLandCSSFramework(SASS):
.wrapper{
height: 100vh;
}
.background {
background: linear-gradient(to bottom right, rgba(0, 47, 75, .6), rgba(177, 28, 23, .5)), url("../imgs/backpizza.jpg") no-repeat center;
background-size: cover;
}
.logo {
margin-bottom: 1rem;
.col-auto {
padding: 0.3rem;
}
img {
width: 6rem;
}
h4{
color: snow;
font-size: 2rem;
font-style: italic;
}
}
/*.row .verticalalign{
height: 100vh;
}*/
.headline h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 3.5rem;
letter-spacing: 12px;
line-height: 48px;
font-weight: 700;
@include media-breakpoint-down(lg){
font-size: 2.3rem;
letter-spacing: 6px;
line-height: 20px;
padding-bottom: 1rem;
}
}
.btnbottom {
position: absolute;
left: 0;
right: 0;
//background-color: $red !important;
margin-left: auto;
margin-right: auto;
width: 300px;
bottom: 0;
font-size: 0.9rem;
padding: .3rem;
@include border-bottom-radius(0);
@include media-breakpoint-down(lg){
display: none;
}
}
.card {
//@include box-shadow(0 1px 3px rgba(0,0,0,0.12));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
//transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover {
//box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-img-top {
height: 100px;
object-fit: cover;
@include border-top-radius($border-radius);
}
.card-body {
padding: .3rem;
.rowphone, .rowaaddresses {
color: $gray-800;
}
.card-title {
margin-bottom: .3rem;
font-weight: 700;
color: $red;
font-size: 1.4rem;
text-align: center;
}
hr {
margin-top: .1rem;
margin-bottom: .1rem;
border: 0;
border-top: 1.2px solid $gray-600;
}
}
.card-footer .btn {
@include border-top-radius(0);
padding: .275rem;
}
}<body>
<div class="wrapper background text-center">
<header>
<nav class="row justify-content-center logo">
<!-- era div no lugar de nav-->
<div class="col-auto align-self-center">
<h4>Pizza</h4>
</div>
<div class="col-auto">
<img src="../assets/imgs/pizzalogo.png">
</div>
<div class="col-auto align-self-center">
<h4>Vix</h4>
</div>
</nav> </header>
<div class="wrapper-content">
<!--<section>
<div class="cover">
<header>
<div class="container">
</div>
</header>
</div>
</section>-->
<section class="block-content row align-items-center">
<div class="container">
<header>
<div class="mx-auto headline">
<h1>As Melhores</h1>
<h1>Pizzarias</h1>
<h1>da Grande Vitória</h1>
</div> </header>
<div class="card-deck px-5">
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
</div> </div>
</section>
<button class="btn btn-primary btnbottom text-uppercase">Conheça mais</button>
</div>
</div>
<script src="/assets/_jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="/assets/_fontawesome/fa-solid.min.js">
<link rel="stylesheet" href="/assets/_fontawesome/fontawesome.min.js">
<script src="/assets/js/scrollsmooth.js"></script>
</body>
</html>