Extra width and height with 100% - css

Question

I have some issues with header and other divs, for a reason I get an extra space
I don't want to use overflow:hidden, I want to remove the space, not to hide it..I tried to set the body and html height but it didn't work as well, maybe I have to deal with position:
html {
height: 100%;
}
#header {
position:absolute;
top:0px;
left:0px;
width:100%;
height:50px;
background:#D3790B;
border-bottom: 2px solid black;
}
#chater{
position: absolute;
left: 0px;
top: 52px; /* distanta dintre header si chatbar*/
bottom: 0px;
width: 250px;
height:100%;
opacity: 1;
background-image:url("../images/1.png");;
border-right: 2px solid #D3790B;
}
#navtab {
position: absolute;
top:52px; /* distanta dintre header si navtab*/
left:252px;
width: 73px;
height:100%;
background-image:url("../images/1.png");;
bottom:0px;
}
.tab {
height:78px;
width: 78px;
display:flex;
}
#slidebar {
position: absolute;
width: 4px;
height: 78px;
background-color: darkorange;
border-radius: 2px;
}
#slider {
width:4px;
height:100%;
background: black;
position:absolute;
left:325px;
top:52px;
}
.icons {
padding-top: 20px;
padding-left: 23px;
top:25px;
width:35px;
height:35px;
}
.ctab {
position:absolute;
top:52px;
left:329px;
height:100%;
width:100%;
display:none;
}
.selected {
display: block;
display: initial;
position:absolute;
}
<div id="header"></div>
<div id="chater"></div>
<div id="slider"><div id="slidebar"></div></div>
<div id="navtab">
<div class="tab c1"><img src="/images/icons/jackpot.png" class="icons"></div>
<div class="tab c2"><img src="/images/icons/mines.png" class="icons"></div>
<div class="tab c3"><img src="/images/icons/roll1.png" class="icons"></div>
<div class="tab c4"><img src="/images/icons/wallet.png" class="icons"></div>
<div class="tab c5"><img src="/images/icons/transfer.png" class="icons"></div>
</div>
<div class="ctab tab_1 selected"> Content 1</div>
<div class="ctab tab_2"> Content 2</div>
<div class="ctab tab_3">Content 3</div>
<div class="ctab tab_4">Content 4</div>
<div class="ctab tab_5">Content 5</div>
https://jsfiddle.net/gtq5co2a/

Answer 1

When you have borders or padding, those add to the element's width (i.e., by default width just talks about the width of the "inside stuff" — the actual content area).
You want to add:
box-sizing: border-box;
With the border-box model, width describes the entire width, including padding and borders, with whatever remains being leftover for content.

Answer 2

The problem is with your
<div class="ctab tab_1 selected"> Content 1</div>
If you comment out the absolute position and the left value
.ctab {
/*position: absolute;*/
top: 52px;
/* left: 329px; */
height: 100%;
width: 100%;
}
then the extra space disapears.
I don't understand why you are absolutely positioning almost every element though - that seems like you're setting yourself up for more headaches than necessary.
EDIT
Here is a fiddle with no extra space at all
https://jsfiddle.net/f81py7ky/2/
In addition to the above changes i commented our your selected class. Your content isn't showing but now you know what your culprit is, although i still think all the absolute positions is going to be a problem for you.