Hi guys, 


I'm having a hard time setting up the map with 100% height.



Things I have tried:


* Change the map size to 100vh. Result: Map is bigger then the page (I have a header).

* Change the map size to (100vh-Header size in pixels). Result: Map size is about half page.

* Change the map size to a certain pixel size. Result: Works only on that screen size.



This is the CSS code that I've implemented, but it wont work, the result is a half page map. 

SyntaxEditor Code Snippet

.mapa {

    width: 100%;
    height: 100%;
}


.MainContent {
    margin-left: 0px;
    margin-right: 0px;
    min-height: 100%;
    padding-bottom: 0px;
    padding-top: 0px;
    height: 100%;
    width: 100%;

}


body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}


.Footer {
    background-color: transparent;
    font-size: 12px;
    height: 0px;
    padding: 0px ;
    text-align: center;
    top: 100%;
    width: auto;

    -servicestudio-width: 100%;
}


.desktop .Content.ThemeGrid_Wrapper {  padding: 0px 0px;  }

Solution

Hi,

When you used vh minus header height did you used calc? Like this calc(100vh - 50px); 

Make sure you keep the spaces between the numbers and the minus '-'.

Regards,

Marcelo

Solution

Marcelo Ferreira wrote:

Hi,

When you used vh minus header height did you used calc? Like this calc(100vh - 50px); 

Make sure you keep the spaces between the numbers and the minus '-'.

Regards,

Marcelo


Hi Marcelo,


I was not using the calc(), solved my problem.


Thanks