100VH height however page contains scroll bar

Question

100VH height however page contains scroll bar

Asked 6 years, 7 months ago

Viewed 2,443 times

1

I have this page, that I put the height of the page in 100VH, to occupy the entire screen, but it is generating these white spaces at the bottom and side, and this is making appear scrollbars, I do not know why.

HTML and CSS structure ( 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>

2 answers

2

Igor has two ways to solve this. The first which is what I think is most appropriate would be to exchange classes ROW of nav and of section for d-flex. Then remove the class row and replaced by d-flex Because the Row class has margins that are disrupting its layout and generating these spaces and the scroll bar.

The other way would be to leave the class row, but taking away the margins on the hand... like nav.row, section.row {margin-left:0; margin-right:0}

I’ll put the answer I think would be more correct with the .d-flex in place of .row (however still have something to work on CSS, I only did the part to solve this problem of unwanted Scroll and white space ok) I adapted SASS to CSS to work here, but then you fix it as you want ok

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name=
 content=
>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    .wrapper{
  height: 100vh;
}
.background {
  background: linear-gradient(to bottom right, rgba(0, 47, 75, .6), rgba(177, 28, 23, .5)), url("https://baconmockup.com/500/380") 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;

}

.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;


}

.card {

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  }
  .card: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;

  }
  .card-body {
    padding: .3rem;

}
.card-title {
      margin-bottom: .3rem;
      font-weight: 700;
      color: $red;
      font-size: 1.4rem;
      text-align: center;
    }
    .card-title hr {
      margin-top: .1rem;
      margin-bottom: .1rem;
      border: 0;
      border-top: 1.2px solid $gray-600;
    }
.rowphone, .rowaaddresses {
      color: $gray-800;
    }
.card-footer .btn {
   
   padding: .275rem;
 }
</style>
</head>
<body>
    
        <body>
                <div class="wrapper background text-center">
                    <header>
                        <nav class="d-flex 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="http://placeskull.com/50/50">
                    </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 d-flex 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>

    
   
</body>
</html>

Run "Whole Page" to view better.

was that right, the negative margins of -15 on Row, also works to use no-glutters

– Igor Oliveira

2018/04/02 at 02:29
@Igoroliveira "and already check, problems with margins and padding is not - Igor Oliveira 13 hours ago" :)

– Valdeir Psr

2018/04/02 at 12:31

Browser other questions tagged css twitter-bootstrap bootstrap-4

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

by Valdeir Psr • **10,804** points · Answer 1 · 2018-04-01T23:05:35+00:00

This happens because you add some default values to your website, such as padding and the margin.

To correct, simply reset these values, for example:

* {
    margin: 0;
    padding: 0;
}

Full example:

* { padding:0;margin:0; }
.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>

Some people use "techniques" of reset css. This helps the person to have more control of the page.