1

This question had discussed many times, but I cannot find the perfect solution for my situation. 

html,
body {
  margin: 0;
  padding: 0;
}
* {
    box-sizing: border-box;
}

.title {
  font-family: 'Secular One', sans-serif;
  font-size: 120px;
  text-align: center;
  margin-top: 150px;
  color: white;
}

body {
  width: 100vw;
  height: 100vh;
  background:linear-gradient(135deg, #192a75, #192a75 50%, #465aa8 50%, #465aa8);
}


.description {
  color: white;
  text-align: center;
  margin-bottom: 70px;
  font-family: 'Sen', sans-serif;
  font-size: 18px;
}

.button {
  font-family: 'Sen', sans-serif;
  background-color: white;
  font-size: 20px;
  width: 150px;
  height: 55px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Secular+One&family=Sen&display=swap" rel="stylesheet">
    <title>AALB.IO</title>
  </head>
  <body>
    <div class="title">
      <span>AALB.IO</span>
    </div>
    <div class="content">
      <div class="description">
        With HTML, CSS, and Javascript
      </div>
      <div class="button">
        CONTINUE
      </div>
    </div>
  </body>
</html>
body {
  width: 100vw;
  height: 100vh;
  background:linear-gradient(135deg, #192a75, #192a75 50%, #465aa8 50%, #465aa8);
}

As you see, I set linear-gradient fill the entire page using 100vw and 100vh.

However, I still see the annoying scroll bar (for both horizontal and vertical). How could I fill the entire screen with the background? & no scrollbar?

AlbertKang1004
  • 33
  • 7

1 Answers1

2

What's causing the scroll is the top/bottom margins you've added. If you remove the the scrolls disappears. I assume you want the content to be centered vertically so you can create a flex-wrapper containing the items 

.container {
     display: flex;
     justify-content: center;
     flex-direction: column;
     height: 100%;
}

I've created a Sandbox where you can see the final result

henrik123
  • 1,605
  • 13
  • 19