Skip to content
Advertisement

Increase height of Container

I am trying to increase the height of the main body area on my hosted website i.e. the gradient to fill the space below the button as well.

Link – https://surijatin.github.io/covid-second-dose/

Github Repo – https://github.com/surijatin/covid-second-dose

I have tried adding the height: 100vh to the container but is there any better way as well? Doing this way adds a scroll bar and still leaves some white space below.

Advertisement

Answer

Here you go…

1. Remove body margin.

So, change this…

body {
    font-family: "Montserrat",sans-serif;
    margin: 20px 0;
    min-height: 100%;
    min-width: 100%;
}

…into this.

body {
    font-family: "Montserrat",sans-serif;
    margin: 0;
    min-height: 100%;
    min-width: 100%;
}

2. Add margin-top & margin-bottom and height to the header-container.

So, change this…

.header-container {
    background-color: #fff;
    margin-bottom: 20px;
}

…into this.

.header-container {
    background-color: #fff;
    margin: 2vh 0 2vh 0;
    height: 2vh;
}

3. Change padding unit and add height to the main-container.

So, change this…

.main-container {
    background: linear-gradient(130deg,#3c91e7,#78378c);
    color: #fff;
    padding: 2%;
}

…into this.

.main-container {
    background: linear-gradient(130deg,#3c91e7,#78378c);
    color: #fff;
    padding: 2vh 2vh 2vh 2vh;
    height: calc(100vh - 10vh);
}

The trick here is to have all margins, paddings and heights in the same relative unit (i.e., vh). Why? Because then you can use calc to calculate the height of the main-container so that it fills the entire space left.

The calculation:

  • margin from the header-container: 2vh (margin-top) + 2vh (margin-bottom) = 4vh,
  • height from the header-container: 2vh and
  • padding from the main-container: 2vh (padding-top) + 2vh (padding-bottom) = 4vh.

All together it’s 10vh. If you subtract 10vh from 100vh, the main-container will fill the entire space left.

Advertisement