Why isn't my div staying in the wrapper's height? - html

Question

I was wondering if anyone could point in the direction of a solution!
For some reason my rightbar's height isn't staying within the parent div (mainwrapper), and I have the body and the wrapper's height set to 100%.
When I set it to 90% it fits but then when I resize the window to anything lower than 1920x1080, it goes out of the wrapper again.
Any and all would be appreciated!
I read online somewhere that it's usually floating divs that cause this, but I have nothing floating and I believe I have the corrent position:relative placed.
I've not worded this the best with "bar", so here's a gyazo image to hopefully help with this: https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - As you can see, the bar goes out of the wrapper when set to 100%
My code:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-image: url(/css/images/backgroundimages/bgimg.png);
}
div#mainwrapper {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-left: 4px solid #000;
border-right: 4px solid #000;
box-shadow: 0px 0px 10px #000;
background-color: rgba(0, 0, 0, 0.6);
}
div#menubar {
background-color: rgba(41, 128, 185, 0.2);
text-align: center;
padding: 30px;
border-bottom: 3px solid #000;
}
div#menubar a {
text-align: center;
padding: 31px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
font-size: 1.1em;
font-family: 'Muli', sans-serif;
text-shadow: 2px 4px 7px #000;
}
div#menubar a:hover {
background-color: rgba(0, 0, 0, 0.4);
padding: 30px;
font-size: 1.3em;
transition: 0.3s;
color: rgba(231, 76, 60, 1.0);
text-shadow: 1px 1px 2px #000;
font-weight: bold;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
div#maincontent {
width: 100%;
height: 100%;
}
div#rightbar {
width: 15%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
<div id="mainwrapper">
<div id="menubar">
HOME
FRIENDS
FORUM
CONTACT
</div>
<div id="maincontent">
<div id="rightbar">
</div>
</div>
</div>

Answer 1

EDIT: Try erasing the height: 100%; on div#rightbar and replace it with min-height: calc(100vh - 85px);
The reasoning: 100vh means '100% viewport height'. So whatever the height of your browser window is the height #rightbar will be. But you need to subtract the height of #menubar from it (85px). calc() helps you accomplish this. Take a note of this css property/value combo because you'll potentially use it a lot for making your footers stick to the bottom of the page (AKA 'sticky footers'). Make sure you have a space on either side of the - sign. If you don't include those spaces, the calc() function won't work.
OLD ANSWER: I apologize if I don't understand what you're wanting, but I'll give it a shot: #rightbar's height actually is inside of the wrapper - it's just not inside the border that you created around #menubar.
Erase border-bottom: 4px solid #000; from div#menubar and move it to div#mainwrapper instead. Here's an example: https://jsfiddle.net/ms2e2e5v/1/