Make <Body> Fill Entire Screen

Make body fill entire screen?

html, body {
    margin: 0;
    height: 100%;
}

Make HTML body fill entire vertical space using Bootstrap and Rails?

Set the body height to 100% not the min-height and then set your .gradient element to height 100%

See below

html {height: 100%;}
body {height: 100%;}
.gradient {  height: 100%; /*If you're placeing this class on the body then remove this as it is redundent*/  background: #43cea2;  background: -webkit-linear-gradient(to right, #185a9d, #43cea2);  background: linear-gradient(to right, #185a9d, #43cea2);}

<div class="gradient"></div>

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

How do I make a section take up an entire screen regardless?

vw and vh are the units you're looking for. If you want your section to cover the entire viewport, set its width to 100vw and height to 100vh. 1vh is equal to 1% of the entire height of the screen (viewport height) while 1vw is equal to 1% of the viewport width.

If you open DevTools and inspect the welcome section of your example, you'll see that its CSS properties are:

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh; /* <--- This is what you need */
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

How to make body tag to cover the whole content?

Try to reset the whole page right before that css code with something like:

* {
padding: 0;
margin: 0;
}

html, body {
    margin:0; padding:0;
    min-width: 100%;
}

That's just an example, i'll encourage you to use a full CSS Reset. A CSS reset is something very common and used in almost every single webpage out there. From Meyer Web:

The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on. (...) Reset styles quite often appear in CSS frameworks.

I'd say it is a good practice to reset the styles, it forces the dev team to proactively add any CSS property they want to be used in the web. (Or to rely on someone who has gone through this deliberation process, if you use a framework or premade template.)

why does background-color property fills the entire screen even body have 0 height?

body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.

so for the solution, please give background color to HTML div as well.

html {
  background-color: #ffffff;
}

Make <Body> Fill Entire Screen