Shinji-san Shinji-san - 5 months ago 19
HTML Question

Wrapper height overflowing into footer

I want to have a sticky footer but I also want my main div to end right before the footer for the height but the wrapper is not moving up like it normally would if you have negative margin and I don't know why. Even with a min-height I should be able to move it up. When I increase the negative margin nothing happens. Basically I just need my wrapper to be the 100 percent height minus the height of the footer. The div of interest is the one with the blue background. Now my sidebar is perfectly fine(or at least it should be), as it ends right before the black footer.



html {
height: 100%;

}

body{

height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
background-color: #99ff33;
}


#wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
background-color: blue;
min-height: 100%;
height: calc(100vh-130px);
margin-bottom: -130px;

}

#wrapper:after{

content: "";
display:block;
}

#footer, #wrapper:after{
height: 130px;
}


.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}

.sub {

padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}

.sub:last-child{

border: 0px;
}

#sidebar{

float:left;
background-color: yellow;
height:calc(100vh - 130px);
width: 7.5%;
border: 1px solid blue;

}

#footer {
display: flex;
height: 130px;
width: 100%;
background-color: black;
clear: both;

}

<div id="sidebar">

</div>
<div id="wrapper">

</div>


<div id="footer">

<div class="wrap">

<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>

</div>


</div>




Answer

You've mixed up your directions, silly goose!

#wrapper{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    background-color: blue;
    min-height: 100%;
    height: calc(100vh-130px);
    margin-top: -130px;

}

margin-top vs margin-bottom

Comments