height: calc(100vh - 200px); doesn't make the content full screen-CodePudding

Im trying to make a form to appear full screen in my website but there a huge white space at the bottom.

Height: calc(100vh - 200px);

what's going bad here?

CodePudding user response：

Firstly, make sure that you enter the content in a <div> </div> tag. After that enter the thing written below in your website to remove all extra margins

1st Method

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

Now, you can use the code below to give the height of div full.

html, body {
  margin:0px;
  height:100%;
}
.container{
background-color:red;
height:100vh;
}

<div class = "container">
Hi
</div>

2nd Method

.container {
  background:red;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
html, body {
  margin:0px;
}

<div class = "container">
Hi
</div>

CodePudding user response：

Try:

height: 100vh;

If the scrollbar still continues, try to reset the body padding margin:

body {
    margin: 0;
    padding: 0;
}