html page doesn't fit screen - html

Question

I'm trying to make my page feet the screen, but I found that a scroll bar always appear, I'm using vh and vw to try and make it, so it always displays the page without scroll bars. I think the problem is some type of padding, but I'm not sure, how can I make sure that the page is the size of the screen?
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
}
header {
height: 25vh;
width: 100vw;
background-color: #CCC;
text-align: center;
}
header img {
height: 20vh;
width: : 50vw;
}
aside {
width: 20vw;
height: 80vh;
background-color: #0C0;
float: right;
}
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
aside li {
margin: 0;
padding: 0;
}
aside li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
height: 5vh;
}
aside li a:hover {
background-color: #CCC;
}
main {
width: 80vw;
height: 80vh;
background-color: #03C;
margin: 0;
padding: 0;
}
footer {
height: 5vh;
width: 100vw;
background-color: #CCC;
clear: both;
margin: 0;
padding: 0;
}
/*Menu*/
nav {
width: 100vw;
height: 5vh;
background-color: #666;
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin: 0;
padding: 0;
}
nav li a {
height: 3vh;
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 1vh 8vw;
}
nav li a:hover {
background-color: #CCC;
}
<div id="container">
<header><img src="imatges/Gwlogo.png" alt="Mountain View"</header>
<nav>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</nav>
<aside>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</aside>
<main></main>
<footer></footer>
</div>

Answer 1

Well the net height of all the elements was more then 100vh. so you need to change that and also define max-height:100vh; on body, html
body {
margin: 0;
height:100vh;
width:100%;
max-width:100vh;
}
#container {
width: 100vw;
height: 100vh;
}
header {
height: 20vh;
width: 100vw;
margin:0;
padding:0;
background-color: #CCC;
text-align: center;
}
header img {
height: 20vh;
//width: 50vw;
margin:0 auto;
padding:0;
display:block;
}
aside {
width: 20vw;
height: 70vh;
background-color: #0C0;
float: right;
}
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
aside li {
margin: 0;
padding: 0;
}
aside li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
height: 5vh;
}
aside li a:hover {
background-color: #CCC;
}
main {
width: 80vw;
height: 70vh;
background-color: #03C;
margin: 0;
padding: 0;
}
footer {
height: 5vh;
width: 100vw;
background-color: #CCC;
clear: both;
margin: 0;
padding: 0;
}
/*Menu*/
nav {
width: 100vw;
height: 5vh;
background-color: #666;
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin: 0;
padding: 0;
}
nav li a {
height: 3vh;
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 1vh 8vw;
}
nav li a:hover {
background-color: #CCC;
}
<div id="container">
<header><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="Mountain View"</header>
<nav>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</nav>
<aside>
<ul>
<li>Home</li>
<li>Calendari</li>
<li>Formulari</li>
<li>Iframe</li>
</ul>
</aside>
<main></main>
<footer></footer>
</div>

Answer 2

If you wanna main scroll bar disappear, add css properties overflow: hidden; in your body or html tag.
how can i make sure that the page is the size of the screen?
if the page you mean is body or html, set the padding, border, and margin to 0 just to make sure it's fit to the size of screen, but if you mean the page is div with id='container' try this
#container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
it will fit the screen