CODEWITHSUNDEEP
htmlcsswrapper
AceyWolf
AceyWolf

Reputation: 11

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

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">
        <a href="index.php">HOME</a>
        <a href="#">FRIENDS</a>
        <a href="#">FORUM</a>
        <a href="#">CONTACT</a>
    </div>
    <div id="maincontent">
        <div id="rightbar">
        
        </div>
    </div>
</div>

Upvotes: 1

Views: 93

Answers (1)

Kyle Vassella
Kyle Vassella

Reputation: 2646

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/

Upvotes: 2

Related Questions